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

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

淘建站为您提供更多_其它特效_瀑布流_瀑布流，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 59 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：其它特效 > 瀑布流难易程度：初级

瀑布流html代码

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