jQuery waterfall absolute positioning layout (2) (delayed AJAX loading of images)

Waterfall flow-absolute positioning layout, the difference from floating layout is

1. The layout is different:
Absolute positioning: place all absolutely positioned LIs in a UL;
Floating layout : Multiple (usually three or four) ULs are distributed to place LI;
2.AJAX is different
Absolute positioning: You only need to insert the requested JSON data (of course it can be data in other formats) into the UL That's it. Then perform TOP and LEFT settings for this newly inserted LI;
Floating arrangement: Insert the requested JSON data (of course it can be data in other formats) into the corresponding UL respectively, because there is absolute positioning , so there is no need to set the position for LI. It will be automatically arranged downward;

1. Function analysis:

1. Position each LI, that is, set the TOP and LEFT values ​​of each LI;
2. AJAX data , placed in LI, inserted into UL;

2. Implementation process:

1. Set the LEFT of LI;
In which column? With the number of columns multiplied by the width of each LI, you can determine the LEFT value
Find the pattern:
Now I need three columns, then the LI in each column has a common column number (set it yourself 0.1.2 or A.B.C, in short, give a label to these three columns) Here it is set to
The first column of No. 0
The second column of No. 1
The third column of No. 2
So for each row, Only three LI
can be placed. The first LI is at No. 0. The second LI is at No. 1. The third LI is at No. 2
. The fourth LI is at No. 0. The fifth LI is at No. 1 and the sixth LI. li is at No. 2
So if we think of using index modulo, we can get exactly 0 1 2, 0 1 2...
Through this we can judge which column LI is in;
index%3 = 0 1 2, 0 1 2…
Why should we modulo 3? Because we need to get a cycle of three numbers. So if you want to get such a loop in the future, you can consider the modulo operation;
　2. Set the value of TOP;
　Because the total height value of each column is different. So we need to set up three variables to store the height values ​​of different columns.
Why do we need to obtain this value?
1. When loading for the first time, the TOP value of LI is set based on the current column height value;
2. Because the data LI after the AJAX request is to be inserted into the UL, it is necessary to know the current total height of the current column. height, and then give the new LI as its TOP value;
In fact, there is a lot to say in the middle. But it's too long. The comments in my code are also clearly written. If you have any questions, you can leave a message to communicate with me. ! !
One thing to mention is that there are many similar functions, and I have written them into a FUNCTION for easy calling. For example, to set the TOP and LEFT of LI, to obtain the number of columns of LI, and to set the total height of the columns. These are all public and functional blocks, so it is better to write them as separate functions;

(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 = $("
11111
") 
//这里开始和浮动布局不一样了。其它部分在调用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)

For more jQuery waterfall flow absolute positioning layout (2) (delayed AJAX loading of images) related articles, please pay attention to PHP Chinese net!