jQuery 瀑布流 絕對位置布局（二）(延遲AJAX載入圖片)

瀑布流-絕對位置布局，與浮動布局的區別在於

1.布局不一樣：
　　絕對位置：一個UL裡面放置所有的絕對位置的LI；
　　浮動布局：多個（一般三四個）UL分布放置LI；
2.AJAX不一樣
　　絕對位置：只需要將請求來的JSON資料（當然可以是別的格式的資料），插入到UL就可以了。然後再對這個新插入的LI進行TOP和LEFT設定；
　　浮動布置：是將請求來的JSON資料（當然可以是別的格式的資料），分別插入到對應的UL當中，因為有絕對位置，所以不用對LI設定位置。會自動向下排列；

一、功能分析：

　　1.定位每一個LI，即設定每一個LI的TOP和LEFT值；
　　2.將AJAX的資料，放在LI中，插入到UL當中；

二、實現過程：

　　1.設定LI的LEFT；
　　　　在那一列？有了列數再乘以每個LI的寬度，就可以確定LEFT值
　　　　找規律：
　　　　現在我需要三列，那麼每一列當中的LI，都有一個共同的列號（自己設定0.1.2或者A.B.C，總之自己對這三列給一個標識）這裡設為
　　　　0號第一列
　　　　1號第二列
　　　　2號第三列
　　　　所以每一行，只能放三個LI
　　　　第一個li 在 0號 第二個li 在 1號 第三個li 在 2號
　　　　第四個li 在 0號 第五個li 在 1號 第六個li 在 2號
　　　　所以想到用索引模數,正好可以得出0 1 2 ，0 1 2 ……
　　　　通過這個我們就可以判斷LI在那一列；
　　　　index%3 = 0 1 2 ，0 1 2 ……
　　　　為什麼要模3,因為要得出三個數的迴圈。所以以後要想得出這樣的迴圈，都可以考慮模數運算；
　　2.設定TOP的值；
　　　　因為每一列的總高度值都是不一樣的。所以我們要設三個變數來存放不同列的高度值。
　　　　為什麼要取得這個值？
　　　　1.初次載入的時候LI，的TOP值，是根據當前列高度值來設定的；
2.因為AJAX請求後的資料LI要插入到UL當中，必需知道當前列現在的總高度，然後給新的LI為它的TOP值；
其實中間有很多可以說的。但實在是太長了。我代碼中注釋也寫的很清楚了。有問題可以留言和我交流。！！
要提一點的就是，裡面有很多相同的功能，我都寫到一個FUNCTION當中，方便調用。例如要設LI的TOP和LEFT，要擷取LI的列數，要設定列的總高度。這都是共公的，也是功能塊，所以還是單獨用函數寫出來好； 複製代碼 代碼如下:(function($){
$.fn.extend({
waterfall:function(value){
value=$.extend({
jsonUrl:"",
dataType:"",
cloum:"",
liWidth:""
},value)
//引用包函布瀑布流的DIV對象
var $this = $(this);
//存放列的充號
var colmLeftIndex = 0;
//用來存放每一列的高度值；
var liHeight_0 = 0;
var liHeight_1 = 0;
var liHeight_2 = 0;

//設定列的序號
function getcolums(col){
colmLeftIndex = col%value.cloum;
}
//設定當前列的高度
function getLiHeight(colIndex,hei){
switch(colIndex){
case 0:
liHeight_0 += hei
break;
case 1:
liHeight_1 += hei;
break;
case 2:
liHeight_2 += hei;
break;
}
}
//設定每一個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;
}
}

//初次載入時，遍曆所有的LI，並定位每一個LI的TOP和LEFT值
$this.find("li").each(function(index, element){
//當前LI的引用
var $liThis = $(this);
//獲得當前LI的高度值
var liH = $liThis.outerHeight();
//獲得當前列的序號
getcolums(index);
//把當前LI的高度值存到相應的列的總高度變數中
setLiOffset($liThis,liH)

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

DEMO下載 （這個要在本地機器上安裝伺服器平台。我用的是PHP套裝APPSERV，裡面的是APACHE）