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

来源:https://www.sucaihuo.com/js/594.html 2015-12-15 05:32浏览(3482) 收藏

waterfall是一款常用的瀑布流插件,你可以自定义容器,列数,间隔和是否可收缩尺寸。
waterfall无限动态加载图片支持手机移动端的瀑布流插件
分类:其它特效 > 瀑布流 难易:初级
查看演示 下载资源 下载积分: 20 积分

瀑布流html代码

<div id="div1">
    <div class="box">
        <a href='http://www.sucaihuo.com/js/350.html' target='_blank'>
            <img src='images/01.jpg' alt='jQuery手机点击显示二级菜单' />
        </a>
    </div>
    <div class="box">
        <a href='http://www.sucaihuo.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();
    }
});
标签: 瀑布流
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2