瀑布流插件

早就聽聞瀑布流佈局，今天用jquery試着寫出，不夠完善，基本能用。
照例先奉上最終效果圖：

HTML結構代碼：

<div id="waterfall">
    <ul>
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
        <li><img src="img/4.jpg"></li>
        <li><img src="img/5.jpg"></li>
    </ul>
</div>

樣式文件：

#waterfall{
    margin: 30px 0;
}
#waterfall ul{
    margin: 0;
    padding: 0;
    position: relative;
}
#waterfall li{
    list-style: none;
    position: absolute;
    padding: 0;
    display: none;
    background-color: #ccc;
}
#waterfall img{width: 100%;}

插件部分：

;(function(){
    $.fn.waterfall = function(object){
        var object = object || {},
            imgWidth = object.imgWidth || 120,
            divideWidth = object.divideWidth || 6,
            divideHeight = object.divideHeight || divideWidth,
            imgNum = object.imgNum || 5,
            loadNum = object.loadNum || 6,
            arrH = [];
        for (var i = 0; i < imgNum; i++) {
            arrH.push(0);
        }   
        window.onscroll = function(){
            if (Isfall()) {
                fall(1);
            }
        }
        var Isfall = function(){
            var lastH = Math.floor($('#waterfall').find('li:last').height()/2) + $('#waterfall').find('li:last').offset().top,
                scrollTop = $(window).scrollTop(),
                winH = $(window).height();
            return (lastH - scrollTop  < winH)?true:false;
        }

        var fall = function(len){
            if (len != 0) {
                len = $('li').size();
                for (var i = 0; i < loadNum; i++) {
                    $('#waterfall ul').append('<li><img src="img/'+Math.ceil(Math.random()*5)+'.jpg"></li>');
                }
            }
            $('#waterfall li').each(function(index){
                if (index>=len) {
                    var minH = Math.min.apply( null, arrH );
                    var minHIndex = $.inArray( minH, arrH );
                    $(this).css({
                        'width':imgWidth,
                        'left':minHIndex*(imgWidth+divideWidth) + 'px',
                        'top':minH + 'px',
                        'display':'block'
                    });
                    arrH[minHIndex] += $(this).height()+divideHeight;
                }
            })
        }
        fall(0);
    }
})(jQuery)

這個觸發加載圖片的點是在判斷最後一張圖片距離瀏覽器窗口頂部的偏移加上其自身高度一半減去滾動條距離瀏覽器窗口頂部的偏移是否小於當前瀏覽器的高度。
設置一個數組記錄每列圖片疊加起來的高度，每次判斷最小高度列，向該列追加圖片。

引用代碼：

$(document).ready(function(){
    $('#waterfall').waterfall({
        imgWidth:200,
        divideWidth:20,
        divideHeight:20,
        imgNum:4,
        loadNum:6
    });
})

自定義內容：
imgWidth：每張圖片的寬度，高度自動適應，默認120px；
divideWidth：圖片間隔寬度，默認6px;；
divideHeight：圖片間隔高度，若不指定則等於寬度間隔；
imgNum：每行圖片數量，默認4；
loadNum：每次加載圖片數量，默認6。

存在問題：初始時頁面須含有圖片，否則取得列高度值有誤。後期來改。

完整代碼插件下載地址：插件下載地址。