PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > JS特效 > 瀑布流 > 正文

    实现无限滚动加载的jQuery瀑布流插件代码

    作者:admin来源:网络浏览:时间:2014-08-02 13:14:21我要评论
    分享到

    内容介绍

    实现无限滚动加载的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);

    下载资源:190 下载积分:0 积分
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-79-372-1.html