[Transfer] A brief analysis of DIV CSS waterfall flow layout_html/css_WEB-ITnose

Introduction

If you often surf the Internet, does this uneven multi-column layout look familiar?

Similar layouts seem to appear overnight on websites large and small at home and abroad, such as Pinterest (seems to be the first website to use this layout), Mark, Mogujie, Diandian, and Taobao's latest "Wow" and so on, it is very popular~ Among the many products that are about to be launched on Taobao, you will also see a lot of this form.

This layout is suitable for small data blocks, each data block has similar content and no emphasis. Typically, this layout also loads chunks of data and appends them to the current tail as the page scroll bar scrolls down. Therefore, we gave this layout an vivid name? Waterfall flow layout.

Several implementation methods

As more and more designers love to use this layout, we, as the front end, must satisfy the visual/interaction requirements as much as possible Designer needs. Therefore, we have sorted out several implementation methods of this layout, there are three:

1) Traditional multi-column floating. That is, the method adopted by Mogujie and Wow, as shown in the figure below:

Each column has a fixed width and floats left;
The data blocks in a column are a group , each data block in the column can be arranged in sequence;
When more data is loaded, it needs to be inserted into different columns;
Online example.

Advantages:

The layout is simple, it should be said that there is no special difficulty;
There is no need to explicitly know the height of the data block. When there are pictures in the data block, there is no need to specify it. Image height.

Disadvantages:

The number of columns is fixed and difficult to expand. When the browser window size changes, only x columns can be fixed. If you want to add a column, it is difficult to adjust the data block. Arrangement;
When scrolling to load more data, it is still inconvenient to specify which column to insert into.

2) CSS3 definition. There is a document about multi-column layout in W3C. The arrangement looks like:

is directly rendered by the chrome/ff browser. You can specify the number of columns of the container. Spacing, column middle border, column width;

    #container {          -webkit-column-count: 5；          /*-webkit-column-gap: 10px；          -webkit-column-rule: 5px solid #333；          -webkit-column-width: 210px；*/            -moz-column-count: 5；          /*-moz-column-gap: 20px；          -moz-column-rule: 5px solid #333；          -moz-column-width: 210px；*/            column-count: 5；          /*column-gap: 10px；          column-rule: 5px solid #333；          column-width: 210px；*/      }

column-count is the number of columns; column-gap is the spacing distance of each column; column-rule is the size of the spacing edge; column-width is the width of each column; when only column-width is set, when the browser window is smaller than the width of one column, the content in the column is automatically hidden; when only column-count is set, the width of each column is calculated on average, and the content in the column is hidden if it exceeds; both are set If column-count and column-width are specified, the browser will calculate the width based on count and compare it with width, take the larger value as the width of each column, and then when the window is reduced, the value of width will be the minimum width of each column. This is actually very simple. Just try it yourself. For details, please refer to the instructions in https://developer.mozilla.org/en/CSS3_Columns.
Online examples.

Advantages:

Direct CSS definition, the most convenient;
Easy to expand, just add content directly to the container.

Disadvantages:

can only be used in advanced browsers;
There is another disadvantage. Its data blocks are arranged from top to bottom to a certain height, and then Adding the remaining elements to the next column is essentially different;
In view of these two major shortcomings, this method is destined to be limited to high-end browsers, and is more suitable for text arrangement in multiple columns.

3) Absolute positioning. That is, the method adopted by Pinterest, Mark, and KISSY:

can be said to be the best solution, which is convenient for adding data content, window changes, and the number of columns/data blocks will be automatically adjusted;
Online examples.

Disadvantages:

You need to know the height of the data block. If it contains a picture, you need to know the height of the picture;
JS dynamically calculates the position of the data block. When the window is zoomed frequently, it may It will waste performance.
KISSY.Waterfall implementation ideas

KISSY’s Waterfall component mainly consists of two parts. One is to arrange the existing data blocks and calculate their respective positions; the other is to trigger the loading data operation when scrolling down. And add the data to the target container.

1) Data block arrangement, the algorithm steps are briefly described below:

During initialization, the first calculation is performed on the existing data block elements in the container. The user needs to give: a, container element? This is used to obtain the total width of the container; b, column width; c, minimum number of columns ; The final number of columns is the maximum of the container width/column width and the minimum number of columns. This ensures that when the window is small, the data of the minimum number of columns will still appear;
After obtaining the number of columns, you need to save each column The current height of the container, so that when adding each data block, you will know what the starting height is;
Take all the data blocks in the container in turn, first look for a column with the smallest current height, and then determine the data block according to the column serial number The left and top values, left is the serial number of the column multiplied by the column width, top is the current height of the column, and finally the current height of the column is updated plus the height of the data block element. At this point, inserting an element ends;
When all elements are inserted, adjust the height of the container to the maximum height value of each column, and end the adjustments in sequence;
Notes on performance efficiency: a. If the adjustment is currently being performed and the resize event is triggered, you need to Execute this adjustment after the last adjustment is paused (see timedChunk function); b. resize triggers will be very frequent, and the callback function can be cached for a period of time before execution, that is, when the resize event is triggered multiple times during this period, the callback function only It will be executed once (see S.buffer function)
If you are interested, you can see the source code.

2) Asynchronous loading of data. What we talked about earlier is how to arrange existing elements in the container, but in many cases, new data blocks need to be continuously loaded. For this purpose, an independent module KISSY is specially designed. Waterfall.Loader, in fact, this function is even simpler, including only two steps:

Bind the scroll event and determine the preload line height value, that is, to which height you need to load after scrolling Data, in fact, this is the minimum height value of the column, so you can judge whether you want to trigger loading of data by comparing the current scroll value with the minimum height value;
Loading data, in order not to impose too many restrictions on the data source, is completely done by using The author decides where the data source is obtained and its format, which makes it more convenient for users to use. For this reason, this component only provides a load(success, end) interface. How to load is defined by the user, and success/end respectively provide interfaces for how to add new data (suceess is the same as addItems)/how to stop loading. . This is really convenient~~
If you are interested, you can refer to the source code.
KISSY.Waterfall examples and documentation

After seeing this, do you really want to try it out~~ Well, here are some relevant learning materials and examples for reference:

Waterfall API documentation, related constructors, configuration items, and methods are all here;
Examples, including static and dynamic.