How jQuery makes waterfall stream come true _ jquery

This article mainly introduces how jQuery achieves waterfall stream. For more information, see waterfall stream.

(1) absolute positioning scheme: each cell is set to absolute positioning. by calculation, top and left are set separately.

(2) floating scheme: layout N columns (floating) and insert the image data in sequence. for example, if N is 3 columns, insert the first image to the first column, insert the second image to the second column, the third image to the third column, and the fourth image to the first column ........ loop insertion (not adaptive)

CSS and HTML code:

The code is as follows:

Body, ul, li {margin: 0; margin: 0 ;}
Ul {list-style: none ;}
. Clearfix: after {visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0 ;}. clearfix {* zoom: 1}
/* Waterfall Stream */
. WallList {width: 860px ;}
. WallList li {float: left; display: inline; margin-right: 16px ;}
. WallList li a {background: # eee; border: 1px solid # ccc; padding: 5px 5px 0 5px; display: block; margin-bottom: 10px ;}
. WallList li a: hover {border-color: # f60 ;}
. WallList li. name {display: block; text-align: center; padding: 8px 0 ;}
. LoadTips {text-align: center; padding: 15px 0 ;}

The code is as follows:

Loading ......

The general idea of using jQuery is as follows:

(1) obtain the minimum height value in N columns. the API provided by JS is Math. min (), but this API can only pass in 2 parameters at most, so you need to use aplly for extension, Math. min. apply (null, [xxx, xxx, xxxx, xxxx])
(2) bind a scroll event to the window and get $ (document) from the drop-down menu ). scrollTop (), when $ (document ). if scrollTop () is greater than the minimum height value, the ajax request url is used. if there is data, the HTML structure is inserted into the page. if not, the system prompts "loading". then, the window unbinds the event.

The code is as follows:

// Data format
Var testJson = {
"Status": 1,
"Data ":[
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name ": "Image 1 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name ": "Image 2 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name ": "Image 3 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name ": "Image 4 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name ": "Image 5 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x260/eee/fff", "width": 240, "height": 260, "name ": "Image 6 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name ": "Image 7 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name ": "Picture 8 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x265/B5E61D/fff", "width": 240, "height": 265, "name ": "Image 9 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x245/259/fff", "width": 240, "height": 245, "name ": "Image 10 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x310/B5E61D/fff", "width": 240, "height": 310, "name ": "Image 11 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name ": "Image 12 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x150/B5E61D/fff", "width": 240, "height": 150, "name ": "Image 13 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x165/B5E61D/fff", "width": 240, "height": 165, "name ": "Picture 14 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x100/B5E61D/fff", "width": 240, "height": 100, "name ": "Image 15 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name ": "Picture 16 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x225/B5E61D/fff", "width": 240, "height": 225, "name ": "Image 17 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name ": "Picture 18 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name ": "Picture 19 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name ": "Image 20 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name ": "Image 21 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name ": "Image 22 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name ": "Image 23 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name ": "Image 24 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name ": "Image 25 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x210/eee/fff", "width": 240, "height": 210, "name ": "26 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name ": "Image 27 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name ": "Picture 28 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x195/B5E61D/fff", "width": 240, "height": 195, "name ": "Picture 29 "},
{"Href": "http: xxxxxxx", "src": "http://dummyimage.com/240x245/259/fff", "width": 240, "height": 245, "name": "Picture 30 "}
]
}
Var wallPic = function (){
Var $ target = $ ('# walllist '),
$ Li = $ target. find ('Lil '),
$ Tips = $ ('# loadTips '),
OTop = 0, // The scroll judge value
Row = 3, // number of columns
Page = 1, // The page number of the ajax request
Url = 'xxxx', // ajax request address
On_off = true; // Insert the structure switch to prevent ajax errors from loading data multiple times.
Return {
FillData: function (callback ){
Var _ that = this;
On_off = false;
/* Ajax
--------------------*/
// $. Get (url, {page: page, count: 30}, function (json ){
// If (json. status = 1 ){
// _ That. appendHTML (json. data );
// On_off = true;
// Page ++;
//} Else {
// _ That. loadedTips ();
//}
//}, 'Json ');
/* Test simulation-set a timer to simulate ajax request data
-----------------------*/
SetTimeout (function (){
// Simulate termination
If (page = 3 ){
_ That. loadedTips ();
Return;
}
_ That. appendHTML (testJson. data );
On_off = true;
Page ++;
},400 );
},
AppendHTML: function (data ){
Var len = data. length,
N = 0;
For (; n Var k = 0;
N> (row-1 )? K = n % row: k = n;
$ Li [k]. innerHTML + = ''+ data [n]. name + '';
}
This. getOTop ();
},
GetOTop: function (){
OTop = Math. min. apply (null, [$ li. eq (0 ). height (), $ li. eq (1 ). height (), $ li. eq (2 ). height ()]) + $ target. offset (). top;
},
LoadedTips: function (){
$ ('# LoadTips'). find ('span '). text ('data loaded successfully ');
SetTimeout (function (){
Certificate ('{loadtips'}.css ({'Visibility ': 'den den '});
},200 );
// Unbind events
$ (Window). unbind ('scroll', $. proxy (this. scrollEvent, this ));
},
ScrollEvent: function (){
If ($ (document). scrollTop () + $ (window). height ()> oTop & on_off ){
This. fillData ();
}
},
Init: function (){
This. fillData ();
$ (Window). bind ('scroll', $. proxy (this. scrollEvent, this ));
}
}
}();
WallPic. init ();