Jquery瀑布流插件使用介绍_瀑布流插件资源-CSDN文库

93 浏览量 2021-01-19 18:01:22 上传评论收藏 80KB PDF 举报

资源推荐

资源详情

资源评论

Jquery瀑布流插件使用介绍瀑布流插件使用介绍

瀑布流布局浅析

浅谈个人在瀑布流网页的实现中遇到的问题和解决方法

折腾:瀑布流布局（基于多栏列表流体布局实现）

javascript 瀑布流、各大瀑布流简析与建议

因为自己用jquery比较多，便萌生了把瀑布流做成插件的想法，图片就借用迅雷UED上的那些美图吧。

先看看Demo

把代码放出来吧

代码如下:

;(function($){

var

//参数

setting={

column_width:204,//列宽

column_className:’waterfall_column’,//列的类名

column_space:10,//列间距

cell_selector:’.cell’,//要排列的砖块的选择器，限定在瀑布流的容器内

img_selector:’img’,//要加载的图片的选择器

auto_imgHeight:true,//是否需要自动计算图片的高度

fadein:true,//是否渐显载入

fadein_speed:600,//渐显速率，单位毫秒

insert_type:1, //砖块插入方式，1为插入最短那列，2为按序轮流插入

getResource:function(index){ } //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数

},

//

waterfall=$.waterfall={},

$container=null;//容器

waterfall.load_index=0, //加载次数

$.fn.extend({

waterfall:function(opt){

opt=opt||{};

setting=$.extend(setting,opt);

$container=waterfall.$container=$(this);

waterfall.$columns=creatColumn();

render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素时强制不渐显

waterfall._scrollTimer2=null;

$(window).bind(‘scroll’,function(){

clearTimeout(waterfall._scrollTimer2);

waterfall._scrollTimer2=setTimeout(onScroll,300);

});

waterfall._scrollTimer3=null;

$(window).bind(‘resize’,function(){

clearTimeout(waterfall._scrollTimer3);

waterfall._scrollTimer3=setTimeout(onResize,300);

});

}

});

function creatColumn(){//创建列

waterfall.column_num=calculateColumns();//列数

//循环创建列

var html=”;

for(var i=0;i<waterfall.column_num;i++){

html+='<div class=”‘+setting.column_className+'” style=”width:’+setting.column_width+’px; display:inline-block;

*display:inline;zoom:1; margin-left:’+setting.column_space/2+’px;margin-right:’+setting.column_space/2+’px; vertical-

align:top; overflow:hidden”></div>’;

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38668225

粉丝: 2
资源: 940

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip