瀑布流html代码

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