JS three ways to achieve waterfall flow comparison _javascript skills

Waterfall flow is a Web page layout, visual representation of the uneven layout of multiple columns, as the page scroll down, the layout will continue to load the data block and attached to the current tail. The first site to use this layout is Pinterest, gradually in the domestic popular. Most of the domestic fresh station is basically this kind of style.

Waterfall Flow Characteristics:

1, dazzling: The whole version to the main picture, the size of the picture according to a certain pattern of arrangement.
2, Aestheticism: Pictures of the style of the main aesthetic.
3, simple to operate: When browsing the site only need to gently slide the mouse wheel, all the wonderful pictures can be presented in front of you.

Waterfall Flow Layout Implementation mode:
1. Traditional multi-column floating

• · Each column fixed width, and left float;
• · The data block in a column is a group, and each block in the column is arranged sequentially;
• · When more data is loaded, it needs to be inserted into different columns respectively;

Advantages:

The layout is simple, should say no special difficulty;

You don't have to know the height of the block, you don't need to specify the height of the picture when there is a picture in the block of data.

Disadvantages:

Fixed number of columns, expansion is not easy, when the browser window size changes, only fixed x column, if you want to add a column, it is difficult to adjust the arrangement of data blocks;

When scrolling to load more data, it is still inconvenient to specify whether to insert into the first column.

Example:

<! DOCTYPE html>
 
 

Effect:

2. CSS3 style definition

Advantages:

Direct CSS definition, the most convenient;

Easy to expand, directly to the container to add content.

Disadvantages:

Can only be used in advanced browsers;

There is also a disadvantage, his data block arrangement from top to bottom to a certain height, and then add the remaining elements to the next column, which is essentially different;

Given these two main drawbacks, the method is destined to be limited to high-end browsers, and is more suitable for text multiple column arrangement.

Example

<! DOCTYPE html>  

Effect:

3, absolute positioning
The best scheme is easy to add the data content, the window changes, the column number/data block will automatically adjust;

Advantages:
Easy to add data content, window changes, the number of columns/data block will automatically adjust;

Disadvantages:

Need to realize the height of the data block, if it contains pictures, you need to know the height of the picture;

JS Dynamic Computing block position, when the window scaling is frequent, may be crazy consumption performance.

Ideas:

1 Data block Arrangement (to arrange the elements in the container), the algorithm steps are briefly described below:
Set (block element width consistent)
· When initializing, the first calculation of an existing block element in a container requires a user-given: A, container element-to get the total width of the window; B, column width (block element width); c, minimum number of columns;
• Calculate the number of display columns: The window width divided by a block box width down, and set the center of the waterfall display
• Store the height of each column
· After you get the number of columns, you need to save the current height of each column so that you know what the starting height is when you add each block of data.
· To sequentially fetch all the blocks of data in the container, first look for a column with the smallest current height, then determine the left,top value of the data block based on the column ordinal number, and the left is the column number multiplied by the column width, top is the current height of the column, and the current height of the column is updated, and the height of the block element is added, Inserts an element end;
· When all the elements have been inserted, the height of the container is adjusted to the maximum height of each column, and the end is adjusted in turn.

2 The data is loaded asynchronously, and contains two steps:
· Bound scrolling events, and determine the preload line height value, that is, scroll to which height, you need to load the data, in fact, this is the minimum height of the column, so that the current scroll value and minimum height comparison can be judged, whether to trigger loading data;
· Load data, function arguments, can provide load data functions and stop loading (how many time to load stop) function to more convenient control.

The above is the entire content of this article, I hope to help you learn.