Web design waterfall layout analysis of several ways of implementation

if you often surf the Internet, so uneven multi column layout, is not very familiar ah


similar layout, seem to appear overnight in the domestic and foreign large and small sites, such as Pinterest (seems to be the first to use this layout of the site), Mark, mogujie.com, little net, and Taobao’s new line of "wow" and so on, it is very popular in many Taobao products to Kazakhstan on the line, you will see this a lot in the form.

this layout is suitable for small data blocks, each of which is similar in content and without focus. Typically, as the scroll bar scrolls down, the layout continues to load data blocks and append to the current tail. So, we give this layout an image name — waterfall flow layout.


several implementations,

as more designers love to use this layout, we serve as the front end to meet the needs of visual / interactive designers as much as possible. So, we sort out the layout of several implementations, there are three kinds:

1) traditional multi column floating. That is, the way mogujie.com and wow use it, as shown in the following picture:


each column is fixed width, and left floats;

the data block in a column is a set, each data block in the column is arranged in sequence;

more data is loaded and needs to be inserted into different columns, respectively.

online example.


layout is simple, it should be said that there is no particular difficulty;

doesn’t need to know exactly where the data blocks are. When there is a picture in the block, you don’t need to specify the image height.


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


scrolls more data, it is also inconvenient to specify to insert into column number.

2) CSS3 definition. W3C has about the layout of multiple columns of documents, arranged out of the way:


by the chrome/ff browser rendered, can make a specified container number, column spacing, middle column frame, column width to achieve


#container {