Analysis of waterfall Flow layout

Brief introduction

If you often surf the internet, so uneven layout of multiple columns, is it very familiar ah?

Similar layout, seems to appear overnight at home and abroad on a large and small site, for example Pinterest (looks like the earliest use of this layout of the site), mark, mushroom street, Dot dot net, as well as Taobao the latest on-line "Wow" and so on, it is very popular in the Taobao will be on the line of many products, You'll see a lot of this in the form.

This layout is suitable for small blocks of data, each with similar content and no focus. Typically, as the page scroll bar scrolls down, the layout continues to load data blocks and append to the current tail. So, we gave this layout an image of the name- waterfall flow style layout .

Several ways to implement

As more and more designers love to use this layout, we serve as a front-end to meet the needs of visual/interactive designers as much as possible. So, we have sorted out this kind of layout of several realization way, have three kinds:

1 Traditional multiple-column float . That's the mushroom street and wow. The way it is used, as shown in the following illustration:

Each column fixed width, and left float;

The data block in a column is a group, and each block of data in the column is arranged sequentially;

When more data is loaded, it needs to be inserted into separate columns;

The online example.

Advantages:

The layout is simple, should say no special difficulty;

You don't have to know the height of the block, you don't need to specify the height of the picture when there is a picture in the block of data.

Disadvantages:

Fixed number of columns, expansion is not easy, when the browser window size changes, only fixed x column, if you want to add a column, it is difficult to adjust the arrangement of data blocks;

When scrolling to load more data, it is still inconvenient to specify whether to insert into the first column.

2) CSS3 definition . There are documents about multiple-column layouts that are arranged in the consortium:

By Chrome/ff Browser directly render out, you can specify the container number of columns, column spacing, column center border, column width to achieve;

  #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;
& nbsp;      -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 interval distance of each column; Column-rule is the interval edge size; Column-width is the width of each column; When only Column-width is set, the contents of the column are automatically hidden when the browser window is less than one column width ; When setting column-count, the average width of each column is calculated, the contents of the column are hidden; both Column-count and Column-width are set, and the browser calculates the width and the width comparison based on the count, and takes the larger value as the widths of each column, Then, when the window shrinks, the width value is the minimum for each column. This side is actually very simple, easy to try, detailed reference to the Https://developer.mozilla.org/en/CSS3_Columns in the description.

The online example.

Advantages:

Direct CSS definition, the most convenient;

Easy to expand, directly to the container to add content.

Disadvantages:

Can only be used in advanced browsers;

There is also a disadvantage, his data block arrangement from top to bottom to a certain height, and then add the remaining elements to the next column, which is essentially different;

Given these two main drawbacks, the method is destined to be limited to high-end browsers, and is more suitable for text multiple column arrangement.

3) Absolute positioning . That's Pinterest, Mark's, Kissy's way:

Can be described as an optimal scheme, to facilitate the addition of data content, window changes, the number of columns/data blocks will automatically adjust;

The online example.

Disadvantages:

Need to realize the height of the data block, if it contains pictures, you need to know the height of the picture;

JS Dynamic Computing block position, when the window scaling is frequent, may be crazy consumption performance.

Kissy. Waterfall Realization Idea

The waterfall component of Kissy consists of two parts, one is to arrange the existing data blocks to calculate their location, and the other is to trigger the loading data operation and add the data to the target container when scrolling.

1 The data block arrangement , the algorithm steps briefly:

When initialized, the first calculation of an existing block element in a container requires a user-given: A, the container element--to get the total width of the container; B, column width; c, minimum number of columns; The final column count is the maximum of the container width/column width and the minimum number of columns, which ensures that when the window is very small, the data with the smallest number of columns still appears ；

After you get the number of columns, you need to save the current height of each column so that you know what the starting height is when you add each block of data.

To sequentially fetch all the blocks of data in the container, first look for a column with the smallest current height, then determine the left,top value of the data block based on the column ordinal number, and the left is the column number multiplied by the column width, top is the current height of the column, and the current height of the column is updated, and the height of the block element is added, Inserts an element end;

When all the elements are inserted, the height of the container is adjusted to the maximum height of each column, and the end is adjusted in turn.

Performance-efficient note points: A, if the Resize event is currently being adjusted, it is necessary to perform this adjustment after the last adjustment has been paused (see timedchunk function); B,resize triggers will be frequent, and the callback function can be cached for a period of time after execution. That is, the resize event is triggered more than once during this time, but the callback function executes only once (see S.buffer function)

Interested can see the source code.

2 asynchronous loading of data , the preceding is how to arrange the existing elements in the container, but in many cases, we also need to constantly load new data blocks, for this purpose, specifically designed a separate module Kissy. Waterfall.loader, this feature is simpler, and contains only two steps:

Bound scrolling events, and determine the preload line height value, that is, scroll to which height, you need to load the data, in fact, this is the minimum height of the column, so that the current scroll value and minimum height comparison can be judged, whether to trigger loading data;

Loading data, in order not to make too many restrictions on the data source, it is entirely up to the user to determine where the data source is obtained and its format, so that better user-friendly. To do this, the component only provides a load (Success,end) interface, how the load is defined by the user, and the success/end, which gives the interface of how to add new data (Suceess is the same as Additems)/How to stop loading. This is very convenient ~ ~

Interested can see the source code.

Kissy. Waterfall Samples and documentation

See this side, is not very want to try ~ ~ Well, here are some relevant learning materials and examples for reference:

Waterfall API documentation, related constructors, configuration items, methods are here;

Examples that contain both static and dynamic.

Welcome to try and offer comments ~ ~

Author: Chova

Article Source: Taobao ued reprint please indicate the source link.