瀑布流插件，只做了基本的封装，插件自身，只起到排序的作用，具体的无限追加，没有写进插件内部，毕竟DOM结构不是统一的。

下面是调用方法。

//直接传入id或者class，其他配置默认  
var wf = new Waterfall('.ul')  
//其他配置参数  
var wf = new Waterfall({    
    id :'#ul',    //元素的id或者class    
    width : 200,  //每个块的宽度，默认200    
    space : 10,   //每个块之间的间距    
    maxCol :null  //最大列数，默认根据屏幕自动排列    
});    
//提供两个方法    
wf.append(html)  //用与添加数据    
wf.scroll(function(off){    
    if(off) {  }; //滚动判断    
});   
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.

由于动态添加没有封装进去，所以需要自己根据数据来写。

一种是后台返回的数据已经设置好图片的宽高。如下：

var json = [  
    {url:'images/1.jpg',width:399,height:610},  
    {url:'images/2.jpg',width:500,height:750},  
    {url:'images/3.jpg',width:640,height:427},  
    {url:'images/4.jpg',width:427,height:640}  
];  
01.
02.
03.
04.
05.
06.

循环这个json数据，根据当前列的宽度，和json里提供的宽高，算出当前元素的高度。循环一次之后，调用一次append方法，把数据添加到DOM中。

for(var i = 0;i < json.length;i++){  
    var html = '';  
    html = '<li style="height:'+(200 / json[i].width * json[i].height)+'px;">\  
        <img src="'+ json[i].url +'" alt="">\  
    </li>';  
    wf.append(html);  
}  
01.
02.
03.
04.
05.
06.
07.

点击这里查看DEMO

第二种是后台没有提供宽高。数据如下：

var json = [  
    {url:'images/1.jpg'},  
    {url:'images/2.jpg'},  
    {url:'images/3.jpg'},  
    {url:'images/4.jpg'}  
] 
01.
02.
03.
04.
05.
06.

这个时候我们没法通过上面的公式算出高度。因为图片的高度未知，所以需要写一个 img.onload 方法。等图片加载完成，在添加进去。

var imgs = new Image(),n=0,html = '';  
function imgLoad(){  
    imgs.src = json[n].url;  
    //图片onload的时候，去调用append  
    imgs.onload = function(){  
        html = '<li><img src="'+this.src +'"></li>';  
        wf.append(html);  
        n++;  
        if(n < json.length){  
            imgLoad();  
        };  
    };  
};  
imgLoad();
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.

点击这里查看DEMO

另外还有一个 scroll 方法。这个是用于监控最小的那一列是否出现在可视区。返回参数为真假。

wf.scroll(function(off){  
    if(off && flag){  
        $.ajax({  
            //ajax提交记得设置一个开关，否则如果一直滚动鼠标会多次添加。  
        });  
    };  
});  
01.
02.
03.
04.
05.
06.
07.

点击这里下载JS