瀑布流布局

$.fn.layout = function(params){
return this.each(function(){
var options = $.extend({width:100,lineNum:3,defaultData:'had'},params),
$self = $(this);
var layout = {
width : options.width,
height : [],
end : false,
init : function(){
this.setHeightArray();
this.bind();
if(options.defaultData == 'had'){
this.append($self.children(),true);
}else{
this.getData();
}
},
getData : function(){
var me = this;
if($self.next('.loading').length <= 0){
$self.after('<div class="data-loading loading"><span>加载更多数据</span></div>')
}
$self.next('.loading').show()
$.getJSON(options.url,{},function(d){
me.append(d.list)

},'json')
},
append : function(data,bool){
if(data.length > 0){
$self.next('.loading').hide()
for(var i = 0 ,len = data.length; i < len; i++){
var d = $(data[i]),
height = 0;
if(!bool){
$self.append(d);
}
height = d.outerHeight(true);
var pos = this.getPos(height)
d.css({top:pos.top,left:pos.left}).fadeIn();
$self.height(pos.height);
}
}else{
$self.next('.loading').html('没有更多数据').show()
this.end = true;
}
},
setHeightArray : function(){
for(var i = 0; i < options.lineNum; i ++){
this.height.push(0)
}
},
getPos : function(height){
var min = Math.min.apply(null, this.height),
index = $.inArray(min,this.height),
left = index * this.width,
top = min;
this.height[index] = this.height[index] + height;
return {left : left , top : top, height : Math.max.apply(null, this.height)}
},
bind : function(){
var body = document.body,
doc = document.documentElement,
me = this;
$(window).on('scroll',function(){
if(me.end) return;
var scrollHeight = Math.max(body.scrollHeight,doc.scrollHeight),
scrollTop = Math.max(body.scrollTop,doc.scrollTop);
clientHeight = doc.clientHeight;
if(scrollHeight < scrollTop + clientHeight + 300){
me.getData()
}
})
}

}

layout.init()
})
}