Waterfall, also known as waterfall-style layout, is a popular website page layout. It visually presents a multi-column layout with irregular heights. As the page scroll bar scrolls down, this layout continuously loads data blocks and appends them to the current end. The main feature of the waterfall layout is its organized and fixed-width but variable-height design, which distinguishes it from the traditional matrix-style image layout pattern.
The main idea is to record the height of each column. The parent container is relatively positioned, and the members are absolutely positioned. The top
and left
properties are used to control the position. When adding a new member, find the column with the lowest height and place the member below it to achieve the waterfall layout. If dynamic addition of members is not needed and only one-time loading for display is required, you can consider using the flex
layout to set the container as flex-direction: column;
and flex-wrap: wrap;
, and give the container a suitable height to achieve the layout. You can also use the column-*
multi-column layout introduced by CSS3 to achieve this. These two methods are pure CSS implementations of the waterfall layout. However, because both methods arrange members vertically, they are not suitable for layouts that require dynamic insertion of members. When dynamic insertion of members is needed, JavaScript is still required for implementation.