jquery/原生js/css3 实现瀑布流以及下拉底部加载

思路：

style:

<style type="text/css">
        body,html{
            margin:;
            padding:;
        }
        #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="data:images/1.jpg"></div>
            <div><img src="data:images/2.jpg"></div>
            <div><img src="data:images/3.jpg"></div>
            <div><img src="data:images/4.jpg"></div>
            <div><img src="data:images/5.jpg"></div>
            <div><img src="data:images/1.jpg"></div>
            <div><img src="data:images/2.jpg"></div>
            <div><img src="data:images/3.jpg"></div>
            <div><img src="data:images/4.jpg"></div>
            <div><img src="data:images/5.jpg"></div>
            <div><img src="data:images/1.jpg"></div>
            <div><img src="data:images/2.jpg"></div>
            <div><img src="data:images/3.jpg"></div>
            <div><img src="data:images/4.jpg"></div>
            <div><img src="data:images/5.jpg"></div>
            <div><img src="data:images/1.jpg"></div>
            <div><img src="data: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="data:images/'+i+'.jpg"/></div>');
        }
        waterFall();
    }

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

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

    }

原生js实现瀑布流：

function waterFall(){
        var parent=document.getElementById('container');
        var childs=parent.getElementsByTagName('div');
        var CWidth=childs[0].offsetWidth;
        var cols=Math.floor(document.body.clientWidth/CWidth);
        parent.style.width=CWidth*cols+"px";
        var hArr=[];
        for(var i=0; i<childs.length; i++){
            if(i<cols){
                hArr.push(childs[i].offsetWidth);
                childs[i].style.left=i*CWidth+'px';
                childs[i].style.top='0px';
            }else{
                var minH=Math.min.apply(null,hArr);
                var mIndex=getIndex(minH,hArr);
                childs[i].style.left=mIndex*CWidth+'px';
                childs[i].style.top=minH+'px';
                hArr[mIndex]+=childs[i].offsetHeight;
            }
        }        

    }
    function getIndex(item,arr){
        for(var i=0;i<arr.length; i++){
            if(arr[i]==item){
                return i;
            }
        }

    }
     function checkScrollBottom(){
         var wH=document.documentElement.clientHeight||document.body.clientHeight;
         var sH=document.documentElement.scrollTop||document.body.scrollTop;
         var wHeight=wH+sH;
         var Items=document.getElementById('container').getElementsByTagName('div');
         var lastItem=Items[Items.length-1];
         var lastP=lastItem.offsetTop+lastItem.offsetHeight/2;
         return wHeight>lastP?true:false
    }
    function addData(){
        var parent=document.getElementById('container');
        for(var i=1; i<6; i++){
            var divEle=document.createElement('div');
            parent.appendChild(divEle);
            var  imgEle=document.createElement('img');
            imgEle.src="data:images/"+i+".jpg";
            divEle.appendChild(imgEle);
        }
        waterFall();
    }
    window.onload=function(){
        waterFall();
    }

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

    }

css3实现瀑布流：

使用column属性：

可以使用column-width 或者column-count：

#container{column-width:242px; -webkit-column-width:242px; -moz-column-width:242px; -o-column-width:242px; -ms-column-width:242px; }//

1 浏览器会自动计算分几列 2 元素宽度不会变 3 会根据屏幕的宽度显示不同的列数，导致元素之间的间隙不一致

或者#container{column-count:5; -webkit-column-count:5; -moz-column-count:5; -o-column-count:5; -ms-column-count:5; }//

1 浏览器自动计算宽度 2 元素的列数不会变，但是会导致元素的宽度不一致

js与css实现瀑布流的区别：

1 css性能高，浏览器自动计算不需要js一个一个元素计算

2 css元素显示不是很美观，元素之间的间隙不一致

3 js计算的元素是按顺序显示的，css显示的元素是从上到下的布局，导致元素显示不按顺序