JQuery waterfall stream absolute positioning layout (2) (loading images with delayed AJAX)

Waterfall stream-absolute positioning layout, which is different from floating Layout

1. Different la s:
Absolute positioning: Put all absolute positioning LI in a UL;
Floating layout: Multiple (generally three or four) UL distributions are placed in LI;
2. AJAX is different.
Absolute positioning: you only need to insert the JSON data from the request (of course, data in other formats) to UL. Then, set TOP and LEFT for the newly inserted LI;
Floating layout: It is to insert the JSON data from the request (of course, it can be data in another format) into the corresponding UL, because there is absolute positioning, so do not set the location for LI. Will be automatically arranged down;

I. Function Analysis:

1. Locate each LI, that is, set the TOP and LEFT values of each LI;
2. Place AJAX data in LI and insert it into UL;

II. Implementation Process:

1. Set LEFT of LI;
In that column? With the number of columns multiplied by the width of each LI, you can determine the LEFT value.
Search rules:
Now I need three columns, so the LI in each column has A common column number (set 0.1.2 or. B .C. In short, you can give an identifier to these three columns.
First column of No. 0
Column 1
Column 2, third
Therefore, each row can contain only three LI
The first li is at No. 0, the second li is at No. 1, and the third li is at No. 2.
The fourth li is at No. 0. The fifth li is at No. 1. The sixth li is at No. 2.
So when we use the index modulo, We can get 0 1 2, 0 1 2 ......
Through this, we can judge the column where LI is located;
Index % 3 = 0 1 2, 0 1 2 ......
Why do we need to model 3, because we need to obtain a three-number loop. Therefore, the modulo operation can be considered for such a loop in the future;
2. Set the TOP value;
Because the total height of each column is different. Therefore, we need to set three variables to store the height values of different columns.
Why is this value obtained?
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 needs to be inserted into UL, you must know the current total height of the current column, and then give the new LI as its TOP value;
In fact, there are many examples in the middle. But it is too long. The comments in my code are also clearly written. If you have any questions, please leave a message and contact me .!!
One thing to mention is that there are many identical functions in it, and I write them into a FUNCTION for convenient calls. For example, to set TOP and LEFT of LI, to obtain the number of LI columns, you must set the total height of the column. This is a common and functional block, so it is better to write it out with a function alone;Copy codeThe Code is as follows: (function ($ ){
$. Fn. extend ({
Waterfall: function (value ){
Value = $. extend ({
JsonUrl :"",
DataType :"",
Cloum :"",
LiWidth :""
}, Value)
// Reference the DIV object of the package waterfall stream
Var $ this = $ (this );
// Store the column number
Var colmLeftIndex = 0;
// Stores the height values of each column;
Var liHeight_0 = 0;
Var liHeight_1 = 0;
Var liHeight_2 = 0;

// Set the column sequence 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 LEFT of each LI
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 LI and locate the TOP and LEFT values of each LI
$ This. find ("li"). each (function (index, element ){
// Reference of the current LI
Var $ liThis = $ (this );
// Obtain the height of the current LI
Var liH = $ liThis. outerHeight ();
// Obtain the sequence number of the current column
Getcolums (index );
// Save the current LI height value to the total height variable of the corresponding column
SetLiOffset ($ liThis, liH)

});
// 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 sliding distance of the scroll bar
Var winScroll = $ (this). scrollTop ();
// The Last LI of each UL, located at the top of the browser
Var lastLisee = objLiLast. offset (). top
Return lastLisee <(see + winScroll )? True: false;
}
// Whether to enable the AJAX "switch ";
Var onOff = true;
$ (Window). scroll (function (){
// Whether to send an AJAX "Switch" when dragging the scroll bar"
$ 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 obtain the image path
$. Each (ovalue, function (keySrc, avalue ){
$. Each (avalue, function (keysrc1, value1 ){
Var $ imgLi = $ ("<li> <a href =''> <p> 11111 </ p> </a> </li> ")
// This is different from the floating layout. The rest is the same when AJAX is called, because you do not need to specify the UL to be inserted here;
$ This. children ("ul"). append ($ imgLi );
// Obtain the serial number of the LI column inserted to the page.
Var _ liindex = $ imgLi. index ();
Getcolums (_ liindex );
// Obtain the height of the newly inserted LI in the page
Var _ nlih = $ imgLi. outerHeight ();
// Set TOP and LEFT of the current LI
SetLiOffset ($ imgLi, _ nlih );
})
})
OnOff = true;
})
}
})
}
});
})
}
})
}) (JQuery)

Download the DEMO (this is to install the server platform on the local machine. I used the PHP APPSERV package, which contains APACHE)