(function($){
$.fn.extend({
waterfall:function(value){
value=$.extend({
jsonUrl:"",
dataType:"",
cloum:"",
liWidth:""
},value)
//引用包函布瀑布流的DIV對(duì)象
var $this = $(this);
//存放列的充號(hào)
var colmLeftIndex = 0;
//用來存放每一列的高度值；
var liHeight_0 = 0;
var liHeight_1 = 0;
var liHeight_2 = 0;

//設(shè)置列的序號(hào)
function getcolums(col){
colmLeftIndex = col%value.cloum;
}
//設(shè)置當(dāng)前列的高度
function getLiHeight(colIndex,hei){
switch(colIndex){
case 0:
liHeight_0 += hei
break;
case 1:
liHeight_1 += hei;
break;
case 2:
liHeight_2 += hei;
break;
}
}
//設(shè)置每一個(gè)LI的TOP和LEFT
function setLiOffset(oli,liH){
switch(colmLeftIndex){
case 0 :
oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_0});
getLiHeight(colmLeftIndex,liH);
console.log(liHeight_0);
break;
case 1:
oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_1});
getLiHeight(colmLeftIndex,liH);
break;
case 2:
oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_2});
getLiHeight(colmLeftIndex,liH);
break;
}
}

//初次加載時(shí)，遍歷所有的LI，并定位每一個(gè)LI的TOP和LEFT值
$this.find("li").each(function(index, element){
//當(dāng)前LI的引用
var $liThis = $(this);
//獲得當(dāng)前LI的高度值
var liH = $liThis.outerHeight();
//獲得當(dāng)前列的序號(hào)
getcolums(index);
//把當(dāng)前LI的高度值存到相應(yīng)的列的總高度變量中
setLiOffset($liThis,liH)

});
//判斷每個(gè)UL的最后一個(gè)LI，是否進(jìn)入可視區(qū)域
function see(objLiLast){
//瀏覽器可視區(qū)域的高度
var see = document.documentElement.clientHeight;
//滾動(dòng)條滑動(dòng)的距離
var winScroll = $(this).scrollTop();
//每個(gè)UL的最后一個(gè)LI，距離瀏覽器頂部的
var lastLisee = objLiLast.offset().top
return lastLisee < (see+winScroll)?true:false;
}
//是否發(fā)出AJAX的“開關(guān)”；
var onOff = true;
$(window).scroll(function(){
//拖動(dòng)滾條時(shí)，是否發(fā)送AJAX的一個(gè)“開關(guān)”
$this.children("ul").each(function(index, element) {
//引用當(dāng)前的UL
var ulThis = this;
//引用最后一個(gè)LI
var lastLi = $("li:last",ulThis);
//調(diào)用是否進(jìn)入可視區(qū)域函數(shù)
var isSee = see(lastLi);
if(isSee && onOff){
onOff = false;
//發(fā)送AJAX請(qǐng)求，載入新的圖片
$.ajax({
url:value.jsonUrl,
dataType:value.dataType,
success:function(data){
//對(duì)返回JSON里面的list數(shù)據(jù)遍歷
$.each(data.list,function(keyList,ovalue){
//對(duì)LIST里面的SRC數(shù)組遍歷,取到圖片路徑
$.each(ovalue,function(keySrc,avalue){
$.each(avalue,function(keysrc1,value1){
var $imgLi = $("<li><a href=''><img src='" + value1 + "' alt='' /><p>11111</p></a></li>")
//這里開始和浮動(dòng)布局不一樣了。其它部分在調(diào)用AJAX的時(shí)候，是一樣的；因?yàn)檫@里不需要指定插入到那個(gè)UL；
$this.children("ul").append($imgLi);
//獲取這個(gè)新插入到頁面中的LI的列的序號(hào)
var _liindex = $imgLi.index();
getcolums(_liindex);
//獲取這個(gè)新插入到頁面中的LI的高度值
var _nlih = $imgLi.outerHeight();
//設(shè)置當(dāng)前LI的TOP和LEFT
setLiOffset($imgLi,_nlih);
})
})
onOff = true;
})
}
})
}
});
})
}
})
})(jQuery)