JQuery Waterfall Absolute Positioning Layout (ii) (Delay Ajax loading picture) _jquery

Waterfall Flow-absolute positioning layout, and the difference between the floating layout is

1. The layout is different:
Absolute positioning: A UL inside placed all the absolute positioning of Li;
Floating layout: Multiple (general three or four) UL distribution placed Li;
2.AJAX is different.
Absolute positioning: Just the request to the JSON data (of course, can be other formats of data), inserted into the UL can be. Then make the top and left settings for the newly inserted li.
Floating arrangement: Is the request to the JSON data (of course, can be other formats of data), respectively inserted into the corresponding UL, because there is absolute positioning, so do not have to set position on Li. will be automatically arranged downward;

First, functional analysis:

1. Each li is positioned to set the top and left values of each li;
2. The AJAX data, put in Li, inserted into the UL;

Second, the realization process:

1. Set Li's left;
In that column? With the number of columns multiplied by the width of each Li, you can determine the left value
Find the Law:
Now I need three columns, then each of the Li in each column has a common column number (set 0.1.2 or A.B.C, in short, to the three columns to a logo) here set to
Number No. 0, first column.
Number 1th, second column.
Number 2nd, third column.
So you can only put three Li in each line.
The first Li was at number No. 0, the second Li at number 1th, and the third Li at 2nd.
Fourth Li at number No. 0, fifth Li, at number 1th, sixth Li, at 2nd.
So think of using index modulo, just can draw 0 1 2, 0 1 2 ...
By this we can judge Li in that column;
index%3 = 0 1 2, 0 1 2 ...
Why modulo 3 because you want to draw a three-number loop. So in the future to come to such a cycle, you can consider the operation of modulo;
2. Set top value;
Because the total height value of each column is different. So we're going to set three variables to hold the height values of the different columns.
Why do you want to get this value?
1. When the first load, Li, the top value, is based on the current column height values to set;
2. Because the AJAX request data Li to insert into the UL, must know the current column now total height, and then give the new Li for its top value;
In fact, there is a lot to say in the middle. But it was too long. The annotations in my code are also very clear. If you have any questions, you can leave a message and communicate with me.
One thing to mention is that there are many of the same functions in it that I write to a function for easy invocation. For example, to set the top and left of Li, to get the number of columns in Li, you want the total height of the column. This is a common, but also functional block, so or alone with the function of writing good;

Copy Code code as follows:

(function ($) {
$.fn.extend ({
Waterfall:function (value) {
Value=$.extend ({
Jsonurl: "",
DataType: "",
Cloum: "",
Liwidth: ""
},value)
A Div object referencing a waterfall stream of packet functions
var $this = $ (this);
The filling number of the column
var colmleftindex = 0;
The height value used to store each column;
var liheight_0 = 0;
var liheight_1 = 0;
var liheight_2 = 0;

Set the ordinal of a column
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 for 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 first loaded, traverse all Li and locate the top and left values of each Li
$this. Find ("Li"). each (function (index, Element) {
References to current Li
var $liThis = $ (this);
Gets the height value of the current Li
var LiH = $liThis. Outerheight ();
Get the serial number of the current column
Getcolums (index);
Saves the current Li's height value to the corresponding column's total height variable
Setlioffset ($liThis, LiH)

});
Judge each ul's last Li, whether to enter the visible area
function (objlilast) {
Height of the viewable area of the browser
var = document.documentElement.clientHeight;
The distance the scroll bar slides
var Winscroll = $ (this). ScrollTop ();
The last li of each UL, from the top of the browser
var lastlisee = Objlilast.offset (). Top
Return Lastlisee < (see+winscroll) True:false;
}
Whether to emit 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) {
Quote the current UL
var ulthis = this;
Quote Last Li
var Lastli = $ ("Li:last", ulthis);
Call whether to enter the visual area function
var issee = (Lastli);
if (Issee && onoff) {
OnOff = false;
Send an AJAX request to load a new picture
$.ajax ({
URL:VALUE.JSONURL,
DataType:value.dataType,
Success:function (data) {
Iterate over the list data returned in JSON
$.each (Data.list,function (keylist,ovalue) {
Traverse the SRC array inside the list, take the picture path
$.each (Ovalue,function (keysrc,avalue) {
$.each (Avalue,function (keysrc1,value1) {
var $imgLi = $ ("<li><a href= ' ><p>11111</p></a>&lt ;/li> ")
Starting here is different from the floating layout. The other part is the same when invoking Ajax, because there is no need to specify the insert to that UL;
$this. Children ("ul"). Append ($imgLi);
Gets the ordinal number of the column for the newly inserted Li in the page
var _liindex = $imgLi. Index ();
Getcolums (_liindex);
Gets the height value of the new Li that is inserted into the page
var _nlih = $imgLi. Outerheight ();
Sets the top and left of the current Li
Setlioffset ($imgLi, _nlih);
})
})
OnOff = true;
})
}
})
}
});
})
}
})
}) (JQuery)

Demo download (This is to install the server platform on the local machine). I'm using a PHP set Appserv, which is Apache.