Analysis of the implementation principle of 5 waterfall scenarios

On October 14, 2022October 14, 2022

This article introduces the implementation of 5 waterfall scenarios, and you can choose according to your own needs and scenarios.

The 5 scenarios are:

I have encapsulated the implementation of these 5 scenarios into npm packages, npm package address: https://www.npmjs.com/package/react-masonry-component2, can be installed directly in the React project.

Waterfall Stream, a popular type of website page layout,[1] visually presents itself as a jagged, multi-column layout that continuously loads blocks of data [3] and attaches to the current tail as the page scroll bar scrolls down.

The following figure is a schematic diagram of the waterfall layout:

Portrait + height sorting means that each column is arranged in a vertical direction, adding content to the column with the lowest height, as shown in the following figure.

The method of implementing portrait + height sorting waterfalls is a CSS multi-column layout.

Multi-column layout[4] refers to the fact that CSS3 can design text content to be like a newspaper-like multi-column layout, as follows:

Multi-column properties for CSS3:

The implementation idea of waterfall is as follows:

How to use npm – react-masonry-component2[5]:

Online preview[6]

On the basis of vertical + height sorting, the number of columns is adapted by width.

Dynamically define style columnCount to implement the number of columns that are adaptive to the screen width:

How to use npm – react-masonry-component2[7]:

Online preview[8]

Lateral waterfall refers to the fact that each column is arranged horizontally, as shown in the following figure.

The way to implement a lateral waterfall is a CSS elastic layout.

Elastic layout is a way to ensure that elements behave appropriately when pages need to adapt to different screen sizes and device types.

The flexbox layout model was introduced to provide a more efficient way to arrange, align, and allocate empty space for child elements in a container.

Elastic layout properties for CSS3:

The implementation idea of waterfall is as follows:

The waterfall implementation code is as follows:

How to use npm – react-masonry-component2[9]:

Online preview[10]

Horizontal + height sorting means that each column is arranged horizontally and adds content to the column with the lowest height, as shown in the following figure.

Highly ordered requires JS logic.

How to use npm – react-masonry-component2[11]:

Online Preview[12]

According to the width of the adaptive number of columns and vertical scene practice is consistent, are listening to the resize method, according to the width of the screen to get the number of columns that should be displayed under the width, here is not to be repeated.

How to use npm – react-masonry-component2[13]:

Online Preview[14]

This article describes the implementation of 5 waterfall scenarios:

Interested students can go to the project source code [15] to view the complete implementation code.

Can also be downloaded [16] for direct use.

When the waterfall data is particularly large, the dom node is too much, which will affect the page performance, then it is necessary to add rolling preload and node recycling functions for the waterfall stream to optimize, in the next release will update the implementation principle of the rolling preload and node recycling function.

Page layout: https://baike.baidu.com/item/%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80?fromModule=lemma_inlink

Scroll bar: https://baike.baidu.com/item/%E6%BB%9A%E5%8A%A8%E6%9D%A1/7166861?fromModule=lemma_inlink

Data block: https://baike.baidu.com/item/%E6%95%B0%E6%8D%AE%E5%9D%97/107672?fromModule=lemma_inlink

Multi-column layout: https://www.runoob.com/css3/css3-multiple-columns.html