瀑布流布局--jQuery写法

HTML

<div id="main">
        <div class="box">
            <div class="pic">
                <img src="images/0.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/2.jpg" alt="">
            </div>
        </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
#main {
    position: relative;

}
.box {
    padding:15px 0 0 15px;
    float:left;
}
.pic {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #ccc;
    img {
        width:165px;
        height:auto;
    }
}

JavaScript

$(window).on("load",function () {
    waterfall();
    var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
    //模拟json数据;
    $(window).on("scroll",function () {
        if(checkScrollSlide){
            $.each(dataInt.data,function (key,value) {
                var oBox=$("<div>").addClass("box").appendTo($("#main"));
                //jQuery支持连缀,隐式迭代;
                var oPic=$("<div>").addClass('pic').appendTo($(oBox));
                $("<img>").attr("src","images/"+$(value).attr("src")).appendTo(oPic);
            });
            waterfall();
        }
    })
});
//流式布局主函数;
function waterfall () {
    var $boxs=$("#main>div");
    //获取#main元素下的直接子元素div.box;

    //获取每一列的宽度;
    var w=$boxs.eq(0).outerWidth();
    //outerWidth()获取包含padding和border在内的宽度;
    //var w=$boxs.eq(0).width();
    //width()只能获取给元素定义的宽度;

    var cols=Math.floor($(window).width()/w);
    //获取多少列;
    $("#main").width(w*cols).css("margin","0 auto");
    //设置#main元素的宽度和居中样式;

    var hArr=[];
    //每一列高度的集合;
    $boxs.each(function (index,value) {
    //遍历每一个box元素;
    //为了找到之前所有元素的最低点,然后将本元素设置到最低点之下;
        var h=$boxs.eq(index).outerHeight();
        //每一个box元素的高,
        if (index<cols) {
            hArr[index]=h;
            //确定每列第一个元素的高度;
        } else{
            var minH=Math.min.apply(null,hArr);
            //得出列高数组中的最小高度;
            var minHIndex=$.inArray(minH,hArr);
            //$.inArray()方法得出元素(minH)在数组(hArr)中的index值;
            //console.log(value);
            //此时的value是第一行之后的所有的box元素的DOM对象!;
            $(value).css({
            //$(value):将DOM对象转换成jQuery对象,才能继续使用jQuery方法;
                "position":"absolute",
                "top":minH+"px",
                "left":minHIndex*w+"px"
            });
            hArr[minHIndex]+=$boxs.eq(index).outerHeight();
            //最低高元素的高度+刚添加到最低高度下的元素的高度=新的列高;
        };
    });
    // console.log(hArr);
};
function checkScrollSlide () {
    var $lastBox=$("#main>div").last();
    var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
    var scrollTop=$(window).scrollTop();
    var documentH=$(window).height();
    return (lastBoxDis<scrollTop+documentH)?true:false;
}