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

The difference between waterfall flow-absolute positioning layout and floating layout is

1. The layout is different:
Absolute positioning: place all absolutely positioned LIs in one UL;
Floating layout: multiple (Generally three or four) UL distributes LI;
2. AJAX is different
Absolute positioning: Just insert the requested JSON data (of course it can be data in other formats) into UL . Then perform TOP and LEFT settings for the 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. Put the AJAX data in LI and insert it 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, we can determine the LEFT value
Find the pattern:
Now I need three columns, so the LI in each column has a common column number (set it yourself 0.1.2 or A.B.C, in short, give these three columns a label) Here, set it to
　　The first column of number 0
　　The second column of number 1
　　The third column of number 2
　So for each row, Only three LIs can be placed
The first li is at number 0, the second li is at number 1, the third li is at number 2
The fourth li is at number 0, the fifth li is at number 1, and the sixth li is at number 1 li is at No. 2
So if we think of using the index to take 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 in it, 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 function blocks, so it is better to write them as separate functions;

Copy code The code is as follows:

(function($){
$.fn.extend({
waterfall:function(value){
value=$.extend({
jsonUrl:"",
dataType:"",
cloum:"",
liWidth:""
},value)
//Reference the DIV object that contains the waterfall flow
var $this = $(this);
//Storage column's charge number
var colmLeftIndex = 0;
//Used to store the height value of each column;
var liHeight_0 = 0;
var liHeight_1 = 0;
var liHeight_2 = 0;

//Set the column number
function getcolums(col){
colmLeftIndex = col%value.cloum;
}
//Set the height of the current column
function getLiHeight(colIndex,hei){
switch(colIndex){
case 0:
liHeight_0 = hei
break;
case 1:
liHeight_1 = hei;
break;
case 2:
liHeight_2 = hei;
break;
}
}
//Set the TOP and sum of each LI 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;
}
}

//When loading for the first time, traverse all LIs and locate each one LI's TOP and LEFT values
$this.find("li").each(function(index, element){
//Current LI reference
var $liThis = $(this);
//Get the height value of the current LI
var liH = $liThis.outerHeight();
//Get the serial number of the current column
getcolums(index);
//Get the current LI’s The height value is stored in the total height variable of the corresponding column
setLiOffset($liThis,liH)

});
//Judge whether the last LI of each UL enters the visible area
function see(objLiLast){
//The height of the browser’s visible area
var see = document.documentElement.clientHeight;
//The distance the scroll bar slides
var winScroll = $ (this).scrollTop();
//The last LI of each UL, from the top of the browser
var lastLisee = objLiLast.offset().top
return lastLisee < (see winScroll) ?true:false;
}
//Whether to issue the AJAX "switch";
var onOff = true;
$(window).scroll(function(){
//Drag When moving the scroll bar, whether to send an AJAX "switch"
$this.children("ul").each(function(index, element) {
//Reference the current UL
var ulThis = this;
//Reference the last LI
var lastLi = $("li:last",ulThis);
//Call whether to enter the visible area function
var isSee = see(lastLi) ;
if(isSee && onOff){
onOff = false;
//Send an AJAX request to load a new image
$.ajax({
url:value.jsonUrl,
dataType:value.dataType,
success:function(data){
//Traverse the list data in the returned JSON
$.each(data.list,function(keyList,ovalue){
//Traverse the SRC array in the LIST and get the image path
$.each(ovalue,function(keySrc,avalue){
$.each(avalue,function(keysrc1,value1){
var $imgLi = $("

11111

")
//This is different from the floating layout. The other parts are the same when calling AJAX; because there is no need to specify which UL to insert into;
$this.children("ul").append($imgLi);
//Get this new insert To the column number of the LI in the page
var _liindex = $imgLi.index();
getcolums(_liindex);
//Get the height value of the LI newly inserted into the page
var _nlih = $imgLi.outerHeight();
//Set the TOP and LEFT of the current LI
setLiOffset($imgLi,_nlih);
})
})
onOff = true;
})
}
})
}
});
})
}
})
})(jQuery)

DEMO download (This requires installing the server platform on the local machine. I use the PHP suite APPSERV, which contains APACHE)