Comparison of three methods for js to implement waterfall stream and three methods for js waterfall

Comparison of three methods for js to implement waterfall stream and three methods for js waterfall

Waterfall stream is a Web page layout with uneven multi-bar layout. As the page scroll down, the layout will continuously load data blocks and attach them to the current tail. Pinterest was the first website to adopt this layout and gradually became popular in China. Most Fresh sites in China are basically in this style.

Waterfall stream features:

1. wide array of images: The entire version is dominated by images, and images of different sizes are arranged according to certain rules.
2. Aesthetic: The image style is dominated by beautiful images.
3. Easy operation: When browsing the Website, you only need to slide the mouse wheel gently, and all the wonderful pictures will be displayed in front of you.

Waterfall flow layout implementation method:
1. Traditional multi-column floating

• · Fixed column width and left floating;
• · Data blocks in a column are a group, and each block in the column is arranged in sequence;
• · Insert more data into different columns for loading;

Advantages:

The layout is simple. It should be said that there are no special difficulties;

You do not need to explicitly know the height of the data block. When there is an image in the data block, you do not need to specify the Image Height.

Disadvantages:

The number of columns is fixed and expansion is not easy. When the browser window size changes, only the column x can be fixed. If you want to add a column, it is difficult to adjust the arrangement of data blocks;

It is inconvenient to specify the columns to insert when loading more data in a rolling manner.

Example:

<! DOCTYPE html> 
Effect:

2. CSS3 style Definition


Advantages:
It is most convenient to define CSS directly;
You can add content to the container directly.
Disadvantages:
Only advanced browsers can be used;
Another drawback is that his data block arrangement is to sort the data blocks from top to bottom to a certain height, and then add the remaining elements to the next column in sequence, which is essentially different;
In view of these two main disadvantages, it is doomed that this method can only be limited to high-end browsers, and is more suitable for text multi-column arrangement.
Example

<! Doctype html> 
Effect:

3. Absolute Positioning
An optimal solution facilitates adding data content, window changes, and automatic adjustment of the number of columns/data blocks;
Advantages:
Easy to add data content, window changes, and automatic adjustment of the number of columns/data blocks;
Disadvantages:
You need to know the height of the data block. If the data block contains images, you need to know the Image Height;
JS dynamically calculates the location of data blocks. When the window scales frequently, it may consume performance.
Ideas:
1) arrange data blocks (arrange existing elements in the container). The algorithm steps are described below:
Set (block element width is consistent)
· During initialization, the existing data block elements in the container are calculated for the first time. You need to specify a, container element-to obtain the total window width; B, column width (block element width ); c. Minimum number of Columns;
· Calculate the number of displayed columns: divide the window width by the width of a block box and set the center of the display of waterfall.
· Store the height of each column
· After obtaining the number of columns, you need to save the current height of each column so that you can know the starting height when adding each data block;
· Take all data blocks in the container in sequence, first find the column with the smallest current height, and then determine the left and top values of the Data Blocks Based on the column number, left is the sequence number of the column multiplied by the column width. top is the current height of the column. The current height of the column to be updated is added with the height of the data block element. At this point, the insertion of an element ends;
· After all the elements are inserted, adjust the height of the container to the maximum height of each column.
2) load data asynchronously. Two steps are involved:
· Bind a rolling event and determine the pre-loaded line height value, that is, the data to be loaded after rolling to which height. In fact, this is the minimum column height value, in this way, you can compare the current scroll value with the minimum height value to determine whether to trigger data loading;
· Loading data and passing parameters through functions can provide functions for loading data and stopping loading (when loading data) for more convenient control.

The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:

  

 
   
Js-implemented beauty falls stream effect code
 
   
Implementation of javascript adaptive width waterfall stream
 
   
Pure js enables waterfall stream display of photos (automatically adapts to the window size)
 
   
Analysis of waterfall stream layout: Implementation of JS + absolute positioning
 
   
Example of a simple method for js to implement waterfall stream
 
   
Native JavaScript + LESS implement waterfall stream
 
   
Js Implementation of Baidu waterfall stream Imitation Method
 
   
Native JS implements responsive waterfall stream Layout