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或設定0.1.2或設定A.B.C，總之自己對這三列給一個標識）這裡設為 
　　　　0號第一列 
　　　　1號第二列 　〜　　　1號第二列 🎀　　　第一個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 ……　　index%3 = 0 1 2 ，0 1 2 ……　　index%3 = 0 1 2 ，0 1 2 ……『 。所以以後要得出這樣的循環，都可以考慮取模運算； 
　　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)

更多jQuery 瀑布流 絕對定位佈局（二）(延遲AJAX載入圖片)相關文章請關注PHP中文網！