jQuery 瀑布流 絕對定位布局（二）(延遲AJAX加載圖片)
2024-05-06 14:21:54
供稿：網友
瀑布流-絕對定位布局，與浮動布局的區別在于
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;
