Waterfall stream algorithms (to Taobao UED)

1 multi-column floating

Each column is fixed in width and left floating;

Data blocks in a column are a group, and each data block in the column can be arranged in sequence;

When loading more data, you must insert them into different columns;

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.

2 css3

Specify the number of columns, column spacing, column middle border, and column width of the container.

 1 #container { 2         -webkit-column-count: 5； 3         /*-webkit-column-gap: 10px； 4         -webkit-column-rule: 5px solid #333； 5         -webkit-column-width: 210px；*/ 6  7         -moz-column-count: 5； 8         /*-moz-column-gap: 20px； 9         -moz-column-rule: 5px solid #333；10         -moz-column-width: 210px；*/11 12         column-count: 5；13         /*column-gap: 10px；14         column-rule: 5px solid #333；15         column-width: 210px；*/16     }

Column-count is the number of columns; column-gap is the distance between 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 a 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 exceeds the width of the column is hidden; if both column-count and column-width are set, the browser will calculate the width and width based on count to compare, take the value that is big as the width of each column, and then when the window is reduced, the value of width is the minimum width of each column.

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.

3) absolute positioning. Example: kissy. waterfall
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.

Implementation

The waterfall component of kissy mainly consists of two parts: one is to sort existing data blocks and calculate their respective locations; the other is to trigger the data loading operation when the drop-down scroll, and add the data to the target container.

1) Data Block Arrangement Algorithm:

• 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 width of the container, B, column width, C, and the minimum number of columns; the final number of columns is the maximum container width/column width and the minimum number of columns. This ensures that data with the minimum number of columns still appears when the window is very small;
• 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 the data blocks in the container in sequence, first look for a column with the smallest current height, and then determine the left and top values of the Data Blocks Based on the column serial number. Left is the column serial number multiplied by the column width, top is the current height of the column, and the height of the data block element is added to the current height of the column where the last update is located. 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;
• Notes on performance efficiency: a. If the current adjustment is in progress and the resize event is triggered, You need to pause the last adjustment and execute this adjustment (see the timedchunk function); B, resize is triggered frequently and can be executed after caching the callback function for a period of time. That is, the resize event is triggered multiple times during this period, but the callback function is executed only once (see S. buffer function)

2) asynchronously load data

The previous section describes how to arrange existing elements in the container. However, in many cases, new data blocks need to be loaded constantly. Therefore, an independent module Kissy is designed. waterfall. loader. In fact, this function is simpler and only contains two steps:

• Bind a rolling event and determine the pre-loaded line height value, that is, after the scroll to which height, the data needs to be loaded. 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;
• To load data, in order not to impose too many restrictions on the data source, the user determines the data source to obtain and its format, which makes it easier for users to use. Therefore, this component provides only one load (success, end) interface, and you can define how to load it, while the success/end, they respectively show how to add new data (suceess is the same as additems)/How to stop loading interfaces. This is really convenient ~~