Introduction to using Jquery waterfall flow plug-in_jquery

A brief analysis of waterfall flow layout

A brief discussion of the problems and solutions encountered by individuals in the implementation of waterfall flow web pages

Toss: waterfall flow layout (implemented based on multi-column list fluid layout)

javascript waterfall flow, Brief analysis and suggestions of major waterfall flows

Because I use jquery a lot, I came up with the idea of ​​making waterfall flow into a plug-in. Let’s borrow the beautiful pictures from Xunlei UED.

Take a look firstDemo

Publish the code

00

01

< ;div class="cell">

02

< ;img src="P_003.jpg" />

03

04

05

06

< ;div class="cell">

07

< ;img src="P_008.jpg" />

08

09

10

11

< ;div class="cell">

12

< ;img src="P_013.jpg" />

13

14

15

16

< ;div class="cell">

17

< ;img src="P_018.jpg" />

18

19

The following is a detailed description of the functions and default values ​​of each attribute of the configuration parameter object opt.

column_width:204 //Waterfall flow is composed of columns. This parameter specifies the width of each column. This parameter will directly affect the number of columns in the waterfall flow

column_className:'waterfall_column' //The class name of the column, easy to customize the style

column_space:10 //The spacing between columns

cell_selector:'.cell' //The selector of the bricks to be arranged is limited to the container of the waterfall flow, that is, the plug-in obtains the brick elements through this selector, and is Find elements matching this selector within the waterfall container.

img_selector:'img' //Selector for the image to be loaded. If the theme content of the brick elements to be loaded by your waterfall flow is images of varying sizes, then this parameter is the selector of these images, and the plug-in needs to obtain these images for calculation.

auto_imgHeight:true //Do you need to automatically calculate the height of the image? If the size of the image is fixed, set this parameter to false

fadein:true // Whether to fade in and load

fadein_speed:600 //Fade in speed in milliseconds

insert_type:1 //Brick insertion method, 1 means inserting the shortest column, 2 means inserting in sequence

getResource:function(index,render){ } //Get the dynamic resource function, which must return a collection of brick elements. The first parameter index passed in is the number of times it has been loaded. The second parameter is the number of times it has been loaded. The first parameter is the rendering function, which can accept a collection of brick elements as a parameter. If you use ajax to load data, you must manually call the function to render after getting the data. This function is automatically triggered every time the bottom of the waterfall is reached to load more resources.

Comment time:

The content loaded by waterfall flow is generally pictures with the same width and different heights. If the height of the picture can be known in advance, it will be much simpler. But if not, you must wait until the picture is loaded before you can calculate the height of the picture. This This is the most annoying part of the waterfall flow. It is precisely because of this that if the height of the pictures is unknown, the order of insertion may be a little confusing, and the refresh order is different every time, because the order in which each picture is loaded is not the same. It's not fixed, maybe this time is faster, next time that is faster. Therefore, if the height of the image is not known in advance, the height of the entire brick will also be 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 order of bricks, it is recommended to insert bricks in sequence, that is, set the insert_type parameter to 2. Because it is a plug-in, ease of use must be considered, but the easier it is to use, the more complex the plug-in will be inside, and the number of loopholes and bugs will increase, so I will continue to improve this plug-in.

This plug-in supports IE6, chrome, firefox, opera, safari and other mainstream browsers.