jQuery waterfall flow floating layout (1) (delayed AJAX loading of images)_jquery

Floating layout: The columns of the HTML structure are floated.

1. Function analysis:

1. Determine whether the picture enters the visible area;
2. Use AJAX to request server data;
3. The data is broadcast into the corresponding queue;

2. Implementation method:

Bind a processing function to the scroll event l of the window: Do the following work:
1. How to determine whether the picture in the last row has entered the visible area?
If: The distance value of a picture in the last row from the top of the browser's visible area is less than (the distance value of the height scroll bar of the visible area sliding);
Then: it can be determined that this picture has entered the browser The visible area;
2. How to request server data using AJAX;
The $.getJSON() method directly requests data in JSON format;
3. Broadcast the data into the corresponding queue; > Use the $.each loop to enter the corresponding JSON data into the corresponding columns

Copy the code The code is as follows:

$(function(){
//Determine whether the last LI of each UL enters the visible area
function see(objLiLast){
//Browser visible area The height
var see = document.documentElement.clientHeight;
//The distance the scroll bar slides
var winScroll = $(this).scrollTop();
//The last one of each UL LI, distance from the top of the browser
var lastLisee = objLiLast.offset().top
return lastLisee < (see winScroll)?true:false;
}
//Whether to request AJAX "Switch";
var onOff = true;
$(window).scroll(function(){
//Whether to send an AJAX "switch" when dragging the scroll bar
$( "ul").each(function(index, element) {
//Reference the current UL
var ulThis = this;
//Reference the last LI
var lastLi = $("li :last",this);
//Calling whether to enter the visible area function
var isSee = see(lastLi);
if(isSee && onOff){
onOff = false;
//Send AJAX request and load new image
$.getJSON("test1.js",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 = $("

< p>11111

")
$("ul").eq(keysrc1).append(imgLi);
})
})
onOff = true;
})
})
}
});
})
})

3. Notes When executing an AJAX request, data is being transmitted, so it takes a certain amount of time to obtain the returned jSON data. (With data, LI can be inserted into UL) At this time, if the user drags the scroll bar again, the isSee in the above code still returns true; so the AJAX request will be executed again. Here we need to manually set a "switch" to control.
Only after the data loading is completed and the corresponding UL is added, this "switch" is turned on when dragging again, that is, onOff is set to true;,
Because after the data loading is completed, it means that every In the UL of the column, there is more LI data just added through AJAX at the end, so there can be another AJAX request.


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