jQuery瀑布流

之前写过，但是感觉没写过似的，看来有必要重新回想下当时的思路。

<style type="text/css">
    *{margin:0; padding:0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
    img{max-width: 100%; height: auto;}
    #wrap{position: relative; width:90%; margin:0 auto;}
    .box{width:25%; float:left; padding: 0 15px 15px 0;}
    .pic{padding:10px; border:1px solid #888;}
</style>

<div id="wrap">
    <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/15.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/10.jpg" alt=""/></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/18.jpg" alt=""/></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/11.jpg" alt=""/></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/12.jpg" alt=""/></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/13.jpg" alt=""/></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/14.jpg" alt=""/></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/16.jpg" alt=""/></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/17.jpg" alt=""/></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/18.jpg" alt=""/></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/19.jpg" alt=""/></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/20.jpg" alt=""/></div>
    </div>
</div>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script>
    /*
    *  瀑布流 等宽不等高布局
    */
    var waterFall = function() {
        var $wrap = $("#wrap"),
            $list = $("#wrap>div"),
            w = $list.eq(0).outerWidth(), //获取第一个元素宽度也就是所有子元素的宽度
            cols = Math.round($("#wrap").width()/w); //计算每行有几列
        var hArr = []; //数组用来存储每列相加的高度
        var wrapH = 0; //定义最外层box高度
        $list.each(function(index, value) {
            var h = $list.eq(index).outerHeight(); //获取遍历的每个元素的高度
            var minH, minHIndex;
            if(index < cols) {   //循环所有子元素，如果索引小于每列数，那这些元素应该是在第一行.
                hArr[index] = h;
            }else {
                minH = Math.min.apply(null, hArr);  //计算hArr数组中最小高度Math.min.apply(null, Array)方法
                minHIndex = $.inArray(minH, hArr);  //计算hArr数组中最小高度的索引值$.inArray()方法
                $(value).css({
                    'position': 'absolute',
                    'top': minH + 'px',
                    'left': minHIndex*w + 'px'
                })
                hArr[minHIndex] += h; //将原最小高度加上 在下面新增的box高度
            }
            var height = minH + h;
            if(height > wrapH) {
                wrapH = height;
            }
        })
        $("#wrap").height(wrapH);  //给最外层box设置高度
    }

    var checkScrollSide = function() {
        var $lastEle = $list.last(),
            lastEleTop = $lastEle.offset().top + $lastEle.height()/2;
        var scrollH = $(window).scrollTop();
        var windowH = $(document).height();
        return (lastEleTop < scrollH + windowH) ? true : false;
    }

    //页面加载完成有两种事件，一是ready，表示文档结构已经加载完成(不包含图片等非文字文件)，二是onload，表示页面包含图片等文件在内的所有元素加载完成。
    $(window).on("load", function() {  //第一次页面加载如果图片下载速度过慢，使得图片高度无法获取到，元素高度计算会错误，图片出现重叠问题，所以需要等到load事件
        waterFall();
        var dataList = {'data':[{'src':'15.jpg'},{'src':'1.jpg'},{'src':'18.jpg'},{'src':'10.jpg'}]};
        $(window).scroll(function() {
            if(checkScrollSide) {  //判断最后一个元素高度是否显示过半。
                $.each(dataList.data, function(index, value) {
                    var $oEle = $("<div>").addClass("box").appendTo($("#wrap")),
                        $oPic = $("<div>").addClass("pic").appendTo($oEle),
                        $oImg = $('<img>').attr("src", "images/" + $(value).attr("src")).appendTo($oPic);
                })
                waterFall();
            }
        })
    })
</script>