思路：

style:

<style type="text/css">
        body,html{
            margin: 0;
            padding:0;
        }
        #container{
            position: relative;
            margin: 0 auto;
            text-align: center;
        }
        #container div{
            padding: 10px;
            position
 
: absolute;

        }
        #container div img{
            padding: 10px;
            width: 200px;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px #ccc;
        }
    </style>

html:

    <div id="container">
            <div><img src="images/1.jpg"
 
></div>
            <div><img src="images/2.jpg"></div>
            <div><img src="images/3.jpg"></div>
            <div><img src="images/4.jpg"></div>
            <div><img src="images/5.jpg"></div>
            <div><
 
img src="images/1.jpg"></div>
            <div><img src="images/2.jpg"></div>
            <div><img src="images/3.jpg"></div>
            <div><img src="images/4.jpg"></div>
            <div><img src="images/5.jpg"></div>
            <div><img src="images/1.jpg"></div>
            <div><img src="images/2.jpg"></div>
            <div><img src="images/3.jpg"></div>
            <div><img src="images/4.jpg"></div>
            <div><img src="images/5.jpg"></div>
            <div><img src="images/1.jpg"></div>
            <div><img src="images/2.jpg"></div>
        
        </div>

瀑布流就是等寬不等高的元素進行排列;從第二行開始元素從第一行中高度的數組中獲取高度最小的元素開始排列，然後把兩個元素合並為一個元素，再次從數組中取出高度最小的值，依次類推

1 需要對所有的元素進行定位absolute；

2 定義子元素的寬度以及padding值，利用outerWidth() 獲取元素的寬度（包含padding，不包含margin）；

3 獲取屏幕的寬度，第一個子元素的寬度（所有的元素等寬），兩者取模向下取整數，獲取每行的元素的個數 cols；

4 獲取第一行子元素的高度值為一個數組 HArr

5 獲取數組中的最小值以及最小值的index（就是獲取第一行高度最小的元素以及位置）

6 第cols+1個元素的位置就在第一行高度最小的元素的下方

7 修改HArr最小值為原值與第cols+1個元素的高度

8 依次類推

瀑布流定位元素的位置:

    function waterFall(){
        var childs=$(‘#container div‘);
        var CWidth=$(childs[0]).outerWidth();
        var cols=Math.floor($(window).width()/CWidth);
        $(‘#container‘).width(CWidth*cols);
        var hArr=[];
        childs.each(function(index,item){
            if(index<cols){
                hArr.push($(item).outerHeight());
                $(item).css({
                    left:index*CWidth+‘px‘,
                    top:0+‘px‘
                });
            }else{
                var minH=Math.min.apply(null,hArr);
                var mIndex=$.inArray(minH,hArr);
                $(item).css({
                    left:mIndex*CWidth+‘px‘,
                    top:minH+‘px‘
                });
                hArr[mIndex]+=$(item).outerHeight();
            }
        });
    }

當鼠標滾動到頁面底部時開始加載更多的數據：

判斷鼠標滾動的位置：

     function checkScrollBottom(){
         var wHeight=$(window).height()+$(window).scrollTop();
         var lastItem=$("#container>div").last();
         var lastP=lastItem.offset().top+($(lastItem).outerHeight()/2);
         console.log($("#container>div").last());
         return wHeight>lastP?true:false
    }

加載更多的數據：

function addData(){
        console.log(‘addData‘);
        for(var i=1; i<6; i++){
            $(‘#container‘).append(‘<div><img src="images/‘+i+‘.jpg"/></div>‘);
        }
        waterFall();
    }

    window.onload=function(){
        waterFall();
    }

    window.onscroll=function(){
        console.log(checkScrollBottom());
        if(checkScrollBottom()){
            addData();
        }else{
            waterFall();
        }

    }

jquery 實現瀑布流以及下拉底部加載