jq+oopp+瀑布流插件，逼格很高的瀑布（有终止、自适应宽度）

$(function () {
var _pubuliu = new pubuliu("josn/waterfallimgs.json",22,"#main",".box");
});
function pubuliu (jsonUrl,num,big,minBox){
var that = this ;
//json数据
this.dateInt = null;
//json路径
this.JsonUrl = jsonUrl;
//预加载个数
this.num = num ;
//添加位置
this.big = $(big);
//小盒子
this.minBox = null;
this.kkk = 0;
//读取json
this.getJson = function () {
$.post(that.JsonUrl, function (data) {
that.dateInt = data ;
that.preload();
that.waterfall();
$(window).scroll(function (){
if(that.checkScrollSlide()){
that.preload();
that.waterfall();
}
})
},"json");
};
//预加载
this.preload = function(){
for (var i = that.kkk ; i < that.num ;i++){
if(that.dateInt[0].data[i]==null){
continue;
}
var hT =
'<div class="box" >'+
'<div class="pic">'+
'<img src="images/'+that.dateInt[0].data[i].src+'">'+
'</div>'+
'</div>';
that.big.append(hT);
}
that.kkk =that.num;
that.num +=that.num;
that.minBox = $(minBox);
};
//排序方式！！！！！！！！
this.waterfall= function(){
// 计算整个页面的列数（页面宽/box的宽度）
var oBoxW =that.minBox.eq(0).width();
var cols = Math.floor($(window).width()/oBoxW) ;
// 设置main宽度 对齐方式
that.big.css({
"width":oBoxWcols+'px;margin:0 auto;'
});
var hArr = [];
for(var i = 0 ;i<that.minBox.length;i++){
if(i<cols){
hArr.push(that.minBox.eq(i).height());
}
else{
var minH = Math.min.apply(null,hArr);
var index = that.getMinhIndex(hArr,minH);
that.minBox.eq(i).css(
{
"position":"absolute",
"top":minH + 'px',
"left":oBoxWindex + 'px',
"left":that.minBox.eq(index).offset().left+'px'
}
);
hArr[index] += that.minBox.eq(i).height();
}
}
};
this.getMinhIndex = function (arr,val){

    for(var i in arr ){
        if(arr[i]==val){
            return i;
        }
    }
};
////检测是否满足加载数据块体条件
this.checkScrollSlide =  function(){
    var lastBoxH = that.minBox.eq(that.minBox.length-1).offset().top + Math.floor(that.minBox.eq(that.minBox.length-1).height()/2);
    var scrollTop = $(window).scrollTop();
    var height = $(window).height();
    return (lastBoxH<scrollTop+height) ? true : false;
};
this.getJson()

}

---