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

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. Broadcast the data to 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 Viewable area?
If: The distance value between a picture in the last row and the top of the browser's visible area is less than (the height of the visible area + the distance value of the scroll bar sliding);
Then: it can be determined that this picture has entered the browser The visible area of ​​the server;
2. How to use AJAX to request server data;
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

$(function(){ 
//判断每个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的一个“开关” 
$("ul").each(function(index, element) { 
//引用当前的UL 
var ulThis = this; 
//引用最后一个LI 
var lastLi = $("li:last",this); 
//调用是否进入可视区域函数 
var isSee = see(lastLi); 
if(isSee && onOff){ 
onOff = false; 
//发送AJAX请求，载入新的图片 
$.getJSON("test1.js",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
") 
$("ul").eq(keysrc1).append(imgLi); 
}) 
}) 
onOff = true; 
}) 
}) 
} 
}); 
}) 
})

3. Notes
When executing an AJAX request, there is data being transmitted, so certain 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.

For more jQuery waterfall flow floating layout (1) (delayed AJAX loading of images) related articles, please pay attention to the PHP Chinese website!