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. MeCodeThe annotations 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;

( 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  );  //  Column filling               VaR Colmleftindex = 0 ;  //  Used to store 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 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 current Li                   VaR $ Lithis = $ ( This  );  //  Obtain the height of the current Li                   VaR Lih = $ Lithis. outerheight ();  //  Obtains the sequence number of the current column.  Getcolums (INDEX );  // Store the current Li height value in 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 ){  //  Height of the visible area of the browser                      VaR See = Document.doc umentelement. clientheight;  //  Scroll bar sliding distance                     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 Ajax "Switch ";             VaR Onoff = True  ; $ (Window). Scroll (  Function  (){  //  Whether to send a "Switch" of Ajax 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 Ajax requests to load new images  $. 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 demo(Install the server platform on the local machine. I used the PHP appserv package, which contains Apache)