waterfall无限动态加载图片支持手机移动端的瀑布流插件

收藏

waterfall是一款常用的瀑布流插件，你可以自定义容器，列数，间隔和是否可收缩尺寸。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

瀑布流html代码

<div id="div1">
    <div class="box">
        <a href='http://www.erdangjiade.com/js/350.html' target='_blank'>
            <img src='images/01.jpg' alt='jQuery手机点击显示二级菜单' />
        </a>
    </div>
    <div class="box">
        <a href='http://www.erdangjiade.com/js/351.html' target='_blank'>
            <img src='images/04.jpg' alt='jquery鼠标悬浮动画菜单' />
        </a>
    </div>
</div>

引入waterfall瀑布流插件

<script src="js/jquery.waterfall.js"></script>

waterfall设置参数，并追究瀑布流图片

$("#div1").waterfall({
    itemClass: ".box",
    minColCount: 2,
    spacingHeight: 10,
    resizeable: true,
    ajaxCallback: function(success, end) {
        var data = {"data": [
                {"src": "03.jpg"}, {"src": "04.jpg"}, {"src": "02.jpg"}, {"src": "05.jpg"}, {"src": "01.jpg"}, {"src": "06.jpg"}
            ]};
        var str = "";
        var templ = '<div class="box" style="opacity:0;filter:alpha(opacity=0);"><div class="pic"><img src="images/{{src}}" /></div></div>'

        for (var i = 0; i < data.data.length; i++) {
            str += templ.replace("{{src}}", data.data[i].src);
        }
        $(str).appendTo($("#div1"));
        success();
        end();
    }
});