JQuery waterfall floating layout (1) (loading images with delayed AJAX)

Waterfall stream: This layout is suitable for small data blocks. The content of each data block is similar and not focused. Generally, as the page scroll down, this layout will continuously load data blocks and attach them to the current tail Floating layout: that is, columns in the HTML structure, which is float.

I. Function Analysis:

1. Determine whether the image enters the visible area;
2. Request server data using AJAX;
3. broadcast the data to the corresponding queue;

II. Implementation Method:

Bind a processing function to the scroll event l of window: do the following:
1. How can I determine whether the last row of images is in the visible area?
If the distance between an image in the last row and the top of the visible area of the browser is less than (the height of the visible area + the distance value of the scroll bar sliding );
Then, we can determine that the image has entered the visible area of the browser;
2. How to Use AJAX to request server data;
$. GetJSON () method, directly requesting data in JSON format;
3. broadcast the data to the corresponding queue;
Use the $. each loop to import the corresponding JSON data to the corresponding column.

$ (Function () {// determine whether the last LI of each UL enters the visible area function see (objLiLast) {// The height of the visible area of the browser var see = document.doc umentElement. clientHeight; // The distance from which the scroll bar slides. var winScroll = $ (this ). scrollTop (); // The Last LI of each UL, from var lastLisee = objLiLast at the top of the browser. offset (). top return lastLisee <(see + winScroll )? True: false;} // whether to request the AJAX "Switch"; var onOff = true; $ (window ). scroll (function () {// whether to send an AJAX "Switch" $ ("ul") when dragging the scroll bar "). each (function (index, element) {// reference the current UL var ulThis = this; // reference the last LI var lastLi =$ ("li: last", this ); // call whether to enter the visible area function var isSee = see (lastLi); if (isSee & onOff) {onOff = false; // send an AJAX request and load the new image $. getJSON ("test1.js", function (data) {// traverses the list data in the returned JSON $. each (data. list, function (keyList, ovalue) {// traverses the SRC array in the LIST and obtains the image path $. each (ovalue, function (keySrc, avalue) {$. each (avalue, function (keysrc1, value1) {var imgLi = $ ("
11111
") $ (" Ul "). eq (keysrc1). append (imgLi) ;}) onOff = true ;})})}});})})

Iii. Notes
When an AJAX request is executed, data is transmitted. Therefore, it takes some time to obtain the returned jSON data. (With data, you can insert LI into UL.) at this time, if you drag the scroll bar again, the isSee of the code above returns true, so the AJAX request will be executed. Here we need to manually set a "Switch" to control.
Only after the data is loaded and all are added to the corresponding UL, when you drag it again, turn on this "Switch", that is, set onOff to true ;,
After the data is loaded, it means that the UL of each column has more LI data added through AJAX at the end, so there can be another AJAX request.

For more information about jQuery waterfall stream floating layout (1) (loading images with delayed AJAX), refer to PHP Chinese network!