Introduction to Jquery waterfall stream plug-in _ jquery

Waterfall flow layout seems to be very popular at present. For details about the analysis, principles, and knowledge used, you can refer to the analysis on the waterfall flow layout written by the following cool people:

Talking about the problems and solutions encountered by individuals in implementing waterfall web pages

Tossing: waterfall flow layout (based on the multi-column list Fluid layout)

Javascript waterfall stream, Major waterfall Stream Analysis and Suggestions

Because I use jquery more often, I came up with the idea of making waterfall streams into plug-ins. I just borrowed some beautiful images from Thunder UED.

First look at the Demo

Release the code.

The Code is as follows:

; (Function ($ ){
Var
// Parameters
Setting = {
Column_width: 204, // column width
Column_className: 'waterfall _ column ', // Class Name of the column
Column_space: 10, // column spacing
Cell_selector: '. cell', // selector of the bricks to be arranged, limited to the container of the waterfall stream
Img_selector: 'img ', // specifies the selector of the image to be loaded.
Auto_imgHeight: true, // whether to automatically calculate the Image Height
Fadein: true, // whether to load explicitly
Fadein_speed: 600, // progressive display rate, in milliseconds
Insert_type: 1, // brick insertion method. 1 indicates the column with the shortest inserted, and 2 indicates the insertion in turn in order.
GetResource: function (index) {}// gets a dynamic resource function. A set of block elements must be returned. The input parameter is the number of times the function is loaded.
},
//
Waterfall =$. waterfall = {},
$ Container = null; // container
Waterfall. load_index = 0, // Number of Loads
$. Fn. extend ({
Waterfall: function (opt ){
Opt = opt | {};
Setting = $. extend (setting, opt );
$ Container = waterfall. $ container = $ (this );
Waterfall. $ columns = creatColumn ();
Render ($ (this). find (setting. cell_selector). detach (), false); // force not fade when an existing element is rearranged
Waterfall. _ scrollTimer2 = null;
$ (Window). bind ('scroll ', function (){
ClearTimeout (waterfall. _ scrollTimer2 );
Waterfall. _ scrollTimer2 = setTimeout (onScroll, 300 );
});
Waterfall. _ scrollTimer3 = null;
$ (Window). bind ('resize', function (){
ClearTimeout (waterfall. _ scrollTimer3 );
Waterfall. _ scrollTimer3 = setTimeout (onResize, 300 );
});
}
});
Function creatColumn () {// create a column
Waterfall. column_num = calculateColumns (); // Number of Columns
// Create columns cyclically
Var html = '';
For (var I = 0; I Html + ='

';
}
$ Container. prepend (html); // insert Columns
Return $ ('.' + setting. column_className, $ container); // a column set
}
Function calculateColumns () {// calculate the required number of Columns
Var num = Math. floor ($ container. innerWidth ()/(setting. column_width + setting. column_space ));
If (num <1) {num = 1;} // ensure that at least one column exists.
Return num;
}
Function render (elements, fadein) {// render Element
If (! $ (Elements). length) return; // No element
Var $ columns = waterfall. $ columns;
$ (Elements). each (function (I ){
If (! Setting. auto_imgHeight | setting. insert_type = 2) {// if the image height is given or inserted in sequence, you do not have to wait until the image is loaded to calculate the column height.
If (setting. insert_type = 1 ){
Insert ($ (elements). eq (I), setting. fadein & fadein); // insert an element
} Else if (setting. insert_type = 2 ){
Insert2 ($ (elements). eq (I), I, setting. fadein & fadein); // insert an element
}
Return true; // continue
}
If ($ (this) [0]. nodeName. toLowerCase () = 'img '| $ (this ). find (setting. img_selector ). length> 0) {// It is an image or contains an image.
Var image = new Image;
Var src = $ (this) [0]. nodeName. toLowerCase () = 'img '? $ (This). attr ('src'): $ (this). find (setting. img_selector). attr ('src ');
Image. onload = function () {// automatically calculates the size after the image is loaded.
Image. onreadystatechange = null;
If (setting. insert_type = 1 ){
Insert ($ (elements). eq (I), setting. fadein & fadein); // insert an element
} Else if (setting. insert_type = 2 ){
Insert2 ($ (elements). eq (I), I, setting. fadein & fadein); // insert an element
}
Image = null;
}
Image. onreadystatechange = function () {// handle cache problems in IE and other browsers: the onload event will not be triggered after the image is cached.
If (image. readyState = "complete "){
Image. onload = null;
If (setting. insert_type = 1 ){
Insert ($ (elements). eq (I), setting. fadein & fadein); // insert an element
} Else if (setting. insert_type = 2 ){
Insert2 ($ (elements). eq (I), I, setting. fadein & fadein); // insert an element
}
Image = null;
}
}
Image. src = src;
} Else {// image loading not required
If (setting. insert_type = 1 ){
Insert ($ (elements). eq (I), setting. fadein & fadein); // insert an element
} Else if (setting. insert_type = 2 ){
Insert2 ($ (elements). eq (I), I, setting. fadein & fadein); // insert an element
}
}
});
}
Function public_render (elem) {// Asynchronous Data Rendering interface function
Render (elem, true );
}
Function insert ($ element, fadein) {// insert the element into the shortest Column
If (fadein) {// fade-in
Export element.css ('opacity ', 0). appendTo (waterfall. $ columns. eq (calculateLowest (). fadeTo (setting. fadein_speed, 1 );
} Else {// do not fade
$ Element. appendTo (waterfall. $ columns. eq (calculateLowest ()));
}
}
Function insert2 ($ element, I, fadein) {// Insert elements in turn in order
If (fadein) {// fade-in
Export element.css ('opacity ', 0). appendTo (waterfall. $ columns. eq (I % waterfall. column_num). fadeTo (setting. fadein_speed, 1 );
} Else {// do not fade
$ Element. appendTo (waterfall. $ columns. eq (I % waterfall. column_num ));
}
}
Function calculateLowest () {// calculate the index of the column in the shortest range
Var min = waterfall. $ columns. eq (0). outerHeight (), min_key = 0;
Waterfall. $ columns. each (function (I ){
If ($ (this). outerHeight () Min = $ (this). outerHeight ();
Min_key = I;
}
});
Return min_key;
}
Function getElements () {// obtain resources
$. Waterfall. load_index ++;
Return setting. getResource ($. waterfall. load_index, public_render );
}
Waterfall. _ scrollTimer = null; // timer for delayed rolling Loading
Function onScroll () {// scroll Loading
ClearTimeout (waterfall. _ scrollTimer );
Waterfall. _ scrollTimer = setTimeout (function (){
Var $ lowest_column = waterfall. $ columns. eq (calculateLowest (); // The shortest Column
Var bottom = $ lowest_column.offset (). top + $ lowest_column.outerHeight (); // The distance between the bottom of the shortest column and the top of the browser window
Var scrollTop=document.doc umentElement. scrollTop | document. body. scrollTop | 0; // the scroll bar distance.
Var too wheight?document.doc umentElement. clientHeight | document. body. clientHeight | 0; // window height
If (scrollTop> = bottom-appswheight ){
Render (getElements (), true );
}
},100 );
}
Function onResize () {// reschedule when the window is scaled
If (calculateColumns () = waterfall. column_num) return; // The number of columns is not changed and does not need to be rearranged.
Var $ cells = waterfall. $ container. find (setting. cell_selector );
Waterfall. $ columns. remove ();
Waterfall. $ columns = creatColumn ();
Render ($ cells, false); // force not fade out when you rearrange existing elements
}
}) (JQuery );

It seems that the format of the Code is messy. If the above Code is not clear, you can directly view the source file on the demo page.
Plugin usage:

The Code is as follows:

$ (Selector). waterfall (opt); // Where selector is the selector of the waterfall flow container, and opt is the configuration parameter object

The required html structure: the html structure can be an empty container element, such

The brick elements are dynamically loaded in. Of course, you can also put some bricks in advance, such as

The Code is as follows:

00

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

The following describes in detail the role of the attributes of the Configuration Parameter object opt and its default values.

Column_width: 204 // The waterfall stream is composed of columns. This parameter specifies the width of each column. This parameter will directly affect the number of columns of the waterfall stream.

Column_className: 'Waterfall _ column' // Class Name of the column to facilitate custom styles

Column_space: 10 // spacing between columns and columns

Cell_selector:'. Cell '// The selector of the bricks to be arranged, which is limited to the container of the waterfall stream. That is, the plug-in obtains the brick element through this selector, in addition, the elements matched by this selector are searched in the waterfall flow container.

Img_selector: 'Img '// specifies the selector of the image to be loaded. If the subject content of the brick element to be loaded in your waterfall stream is an image of varying size, this parameter is the selector of these images. The plugin needs to obtain these images for calculation.

Auto_imgHeight: True // whether to automatically calculate the Image Height. If the image size is fixed, set this parameter to false.

Fadein: True // whether to incrementally Load

Fadein_speed: 600 // incremental display rate, in milliseconds

Insert_type: 1 // brick insertion method. 1 indicates the column with the shortest insertion length, and 2 indicates the insertion speed in turn.

GetResource: Function (index, render) {}// gets a dynamic resource function. A set of brick elements must be returned. The index of the first input parameter is the number of times loaded, the second parameter is the rendering function. It can accept the cooperation of a brick element set as the parameter. If ajax is used to load data, you need to manually call the function for rendering after obtaining the data. This function is automatically triggered every time you reach the bottom of the waterfall stream to load more resources.

Slot time:

The content loaded by the waterfall stream is generally the same width and different heights. If you can know the Image Height in advance, it is much easier, but if you cannot, the height of the image can be calculated only after the image is loaded. This is the most annoying part of the waterfall stream, and it is precisely because, if the image is of an unknown height, the order of insertion may be a bit messy, and the order of each refresh is different, because the order of loading of each image is not fixed. Maybe this time is faster, but it will be faster next time. Therefore, if the image height is unknown, the height of the entire brick is unknown. The height of the brick must be calculated after the image in the brick is loaded. If this is the case but you want to ensure the insertion sequence of bricks, we recommend that you insert bricks in turn in order, that isInsert_typeSet the parameter to 2. Because it is a plug-in, you need to consider the ease of use, but the easier it is to use, the more complicated the plug-in, the more vulnerabilities and bugs will increase, so I will continue to improve this plug-in.

This plug-in supports mainstream browsers such as IE6 +, chrome, firefox, opera, and safari.