内容介绍
实现无限滚动加载的jQuery瀑布流插件代码,效果非常不错,兼容性也很好,插件参数可自定义配置,可配置列宽,列间距,是否渐显载入,渐显速率,挺好用的,B5教程网推荐下载。
参数设置
//参数
setting={
column_width:204,//列宽
column_className:'waterfall_column',//列的类名
column_space:10,//列间距
cell_selector:'.cell',//要排列的砖块的选择器,context为整个外部容器
img_selector:'img',//要加载的图片的选择器
auto_imgHeight:true,//是否需要自动计算图片的高度
fadein:true,//是否渐显载入
fadein_speed:600,//渐显速率,单位毫秒
insert_type:1, //单元格插入方式,1为插入最短那列,2为按序轮流插入
getResource:function(index){ } //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数
},
调用方法:
1.加载CSS和JS文件,jQuery.js和插件js
2.书写HTML
<div id="container">
<div class="cell"><img src="images/00.jpg" alt="jQuery瀑布流插件图片加载1"/><p>00</p></div>
<div class="cell"><img src="images/01.jpg" alt="jQuery瀑布流插件图片加载2"/><p>00</p></div>
</div>
3.函数调用
$('#container').waterfall(opt);