Web Design waterfall Flow layout analysis of several ways to achieve

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

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

Similar layouts seem to appear overnight at home and abroad on a large and small web 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 that.

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 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 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, and each block of data in the column is arranged sequentially;

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

Online example.

Advantages:

Simple layout, should say no special difficulties;

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.

Shortcomings:

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;
-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 for each column interval distance; The column-rule is the interval edge size; Column-width for each column width; 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 only, the average width of each column is computed, and the contents of the column are hidden; are set Column-count and Column-width, the browser calculates the width and width comparisons based on count, takes the larger value as the widths of each column, and then when the window shrinks, the width 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.

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 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;

Line above.

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 Idea

The waterfall component of Kissy mainly consists of two parts, one is to arrange the existing data blocks to calculate their location; The second is to trigger the load data operation and add the data to the target container when the Drop-down is scrolled.

1 The data block arrangement, the algorithm steps briefly:

When initializing, the first calculation of an existing block element in a container requires a user given: A, the container element-to obtain the total width of the container; b, column width; c, the minimum number of columns; The final number of columns is the container width/column width and the minimum number of columns maximum, so as to ensure that when the window is very small, still appear the smallest number of columns of data;

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.

Performance-efficient attention points: A, if the current adjustment, and triggered the resize event, the last adjustment needs to be suspended after the adjustment (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 period, but the callback function is executed 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 to Additems)/stop loading. This is really 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; http://docs.kissyui.com/docs/html/api/component/waterfall/

Examples that contain both static and dynamic. http://docs.kissyui.com/docs/html/demo/component/waterfall/

Welcome to try and comment ~ ~

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