Analysis of waterfall Flow layout

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, such as &http://www.aliyun.com/zixun/aggregation/37954.html ">nbsp; 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 will see a large number of such forms.

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 streaming layout.

Several realization ways

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 multi-column float. That's the mushroom street and wow, the way it is, as shown in the following illustration:

each column fixed width, and left float; the data block in a column is a group, each block of data in the column is arranged in order, and when more data is loaded, it needs to be inserted into separate columns;

Advantages:

layout is simple, it should be said that there is no particular difficulty, do not know the height of the block, when there is a picture in the block, you do not need to specify the height of the picture.

Shortcomings:

column number fixed, expansion is not easy, when the browser window size changes, can only fix the X column, if you want to add a column, it is difficult to adjust the arrangement of data blocks; When scrolling through more data, it is still inconvenient 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 rendering 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-moz-column-width:210px;*/column-count:5/*column-gap:10px column-rule:5px 333 column-width:210px;*/}column-count as column number, COLUMN-GAP for each column interval distance, column-rule for interval edge size, column-width for each column width; Column-width, the contents of the column are automatically hidden when the browser window is less than the width of a column, and when only Column-count is set, the width of each column is averaged, the contents of the column are hidden; all set Column-count and Column-width, the browser will be based on Count calculates the width comparison, the larger value as the width of each column, and then, when the window shrinks, the width is the smallest of 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. Line above.

Advantages:

Direct CSS definition, the most convenient, easy to expand, directly to the container to add content.

Shortcomings:

can only be used in advanced browsers; There is also a disadvantage, his data block arrangement is 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 major drawbacks, the method is destined to be limited to high-end browsers, and More suitable for text multiple column arrangement.

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

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

Shortcomings:

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 Thought

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:

initialization, the first calculation of an existing block element in the container user given: A, container elements-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, Data with a minimum column number 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, and then take all the data blocks in the container, look for the column with the lowest height, and then determine the left,top value of the data block based Multiplies the column width by the ordinal of the column, and top is the current height of the column. The last update is the current height of the column and the height of the block element, at which point the insertion of an element ends; When all the elements have been inserted, the height of the container is adjusted to the maximum height of each column and then adjusted; performance efficiency note points: A, If the Resize event is currently being adjusted and triggered, the adjustment needs to be performed after the last adjustment has been paused (see timedchunk function); B,resize triggers are frequent, and the callback function can be cached for a period of time, that is, when the resize event is triggered more than once during this time, But the callback function is only executed once (see S.buffer function) is interested to 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:

Bind the scrolling event 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; It is entirely up to the user to determine which side of the data source to obtain 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 to Additems)/stop loading. This is really 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, and methods are here; examples that contain both static and dynamic.

Welcome to try and comment ~ ~

Source: http://ued.taobao.com/blog/2011/09/14/waterfall/