Jquery 瀑布流（滚动加载）

源码下载地址

wf2.png

实现思路

1. 通过容器宽度 和每列的宽度 可以计算出列数。

2. 数组来保存每一列的高度，当页面加载新的盒子时，比较每一列的高度，在最小高度的列上动态添加盒子并设置相关属性（绝对定位）

3. 当鼠标往下滚动到最后一张图片位置时，动态获取数据加载到瀑布流容器中

js部分

$(function(){
        var wfData=null;
        function init(){
            waterfall.initwf();
            waterfall.wfReload();
        }
        //滚动到最后一张图片时动态加载盒子
        $(window).on('scroll',function(){
            if(waterfall.isLoad()){
                waterfall.dynamicAddBox(8);
                waterfall.wfReload();
            }
        });
        //瀑布流
        var waterfall={
            columnCount:Math.floor($('#waterFall').width() / $("#waterFall .box").eq(0).width()),
            boxHeightArr:[],//每列高度集合
            wfReload:function(){
                //重新加载
                console.log('当前盒子个数='+$("#waterFall .box").length);
                waterfall.wfLoad($("#waterFall .box"),waterfall.columnCount);
            },
            //动态添加盒子
            dynamicAddBox:function(length){
                var tempList=waterfall.getRandomList(length,wfData.wfList);
                $.each(tempList,function(index,item){
                    $('
'+
                            '
'+
                            '![]('+item.img+')'+
                            '
'+
                            '
'+item.user+'
'+
                            '
'+item.desc+'
'+
                            '
'+
                            '
'+
                            '
').appendTo($('#waterFall'));
                });
            },
            //动态定位
            wfLoad:function(boxList,columnCount){
                boxList.each(function(index, item) {
                    if (index < columnCount) {
                        //首行每列高度直接加入数组
                        waterfall.boxHeightArr[index] = boxList.eq(index).height();
                    } else {
                        //数组boxHeightArr中的最小值
                        var minHeight = Math.min.apply(null, waterfall.boxHeightArr);
                        var minHeightIndex = $.inArray(minHeight, waterfall.boxHeightArr);
                        $(item).css({
                            'position': 'absolute',
                            'top': minHeight+10,
                            'left': boxList.eq(minHeightIndex).position().left
                        });
                        //数组 更新添加了box后的列高 元素原来高度+新增元素高度
                        waterfall.boxHeightArr[minHeightIndex] += boxList.eq(index).height()+10;
                    }
                });
            },
            initwf:function(){
                $.ajax({
                    url: "../json/waterfall.json",
                    type: "GET",
                    dataType: "json",
                    charset:"utf-8",
                    async:false,
                    success: function(data) {
                        wfData=data;
                    }
                });
            },
            //随机选取指定个数 不同的box
            getRandomList:function(length,originaArr){
                var returnArr=[];
                var indexArr=[];
                var temp=null;
                while(indexArr.lengthflagHeight;
            }
        }
        //初始化
        init();
    });

css部分

.water-fall {width: 1000px;margin: 20px auto 0;position: relative;height: 1170px;}
.water-fall .box {padding: 10px 0 0 10px;float: left;}
.water-fall .box .pic {padding: 10px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc;width: 218px;position: relative;}
.water-fall .box .pic img {width: 218px;height:auto;}
.water-fall .box .pic .evaluate {position: absolute;bottom: 13px;width: 218px;background-color: rgba(13, 135, 84, 0.5);}
.water-fall .box .pic .evaluate .customer {font-size: 14px;color: #fff;margin-left: 10px;}
.water-fall .box .pic .evaluate .desc {font-size: 12px;color: #fff;margin-left: 10px;line-height: 20px;}

html 部分

    

        

            ![](../image/wf1.jpg)
            

                
胡歌
                
生命注定要经历一次次磨难，才能塑造出与众不同，所有的经历都是获得，所有的获得都是上苍给予的恩宠。
            
        
    
    

        

            ![](../image/wf2.jpg)
            

                
胡歌
                
你若太害怕，闭上眼就好。
            
        
    
    

        

            ![](../image/wf3.jpg)
            

                
胡歌
                
如果皮囊难以修复，那就用思想去填满它吧！
            
        
    
    

        

            ![](../image/wf4.jpg)
            

                
胡歌
                
不知道是哪里走错，路的尽头没有人等我。
            
        
    
    

        

            ![](../image/wf5.jpg)
            

                
胡歌
                
当我在黑暗中艰难摸索，试图拾起些碎片的时候，却发现这个过程远没有想像中那么简单。
            
        
    
    

        

            ![](../image/wf6.jpg)
            

                
胡歌
                
我们，结成伴趟过天真。
            
        
    
    

        

            ![](../image/wf7.jpg)
            

                
胡 歌
                
在拥有的时候懂得珍惜，就不会害怕失去；若失去了才知道珍惜，就算不上真正拥有。
            
        
    
    

        

            ![](../image/wf8.jpg)
            

                
胡歌
                
忍了多久，错过青春。却憎恨，别人奋不顾身。