Pinterest Web design using waterfall Flow method

Article Description: The problems and solutions in the realization of the Waterfall streaming web page are discussed in this paper.

First demo.

Waterfall Flow Sort: http://cued.xunlei.com/demos/publ/demo1.html

Waterfall Flow + Infinite drag http://cued.xunlei.com/demos/publ/demo2.html

With the popularity of Pinterest, waterfall streaming layout is used by more and more sites, this layout does have a lot of benefits, the Picture List page has a strong visual appeal, but also improve the user "find a good map" efficiency. Waterfall flow to achieve a number of ways, before the Taobao ued has a detailed article on the pros and cons of various ways. Today we discuss the absolute sort to realize the waterfall flow way namely Pinterest adopts the way.

First of all, the waterfall flow sorting algorithm, reference Demo1, the idea is very simple, we split the waterfall into three parts to see: Containers, columns, lattice

1. First calculate the current screen can accommodate a number of waterfalls, the value is "down the whole (screen visible area width/(lattice width + spacing)";

2. In order to ensure the center of the container, the width of the container is set to the number of columns * (lattice width + spacing)-spacing, you need to note that when the width of the container is calculated and then displayed, otherwise it will cause page width jitter, affect the experience.

3. Sorting begins with the first n (n columns) in each column, respectively, then each time you look for the smallest column, put the grid in (the left value is column ordinal * (lattice width + spacing), top value is column height + spacing), and refresh the height of the column, traversing all the squares until all the squares are sorted.

Finally, the event handle is bound to window.onload and window.onresize, and a waterfall-flow layout page comes out.

Such a sorting algorithm looks very beautiful, can be really combined with asynchronous loading data applied to the page to solve the following several problems

1. When zooming the browser window, the event will be constantly triggered, if the response every time will be a loss of performance, you need to zoom in after the end of the action to rearrange the method.

2. Page scrolling to the bottom after the request data is successful, only the new node is queued.

3. If the server is unable to give the picture height, you need to rearrange the picture after it has finished loading.

The first question I use settimeout and cleartimeout to solve, the train of thought is after the window changes to start the time, if the window is still changing to start the timer, the window no longer changes then the delay (very short time) triggers the rearrangement event. For the time being, there should be a better way.

The code is as follows

var re;

 window.onresize = function（） {
clearTimeout（re）;
re = setTimeout（resize，100）;

 };

The second problem is that if you have new data loads each time, you have to rearrange the nodes in the entire container, which is very consuming performance. Solution Idea:

1. Save the column in a global array, update the array data after each rearrangement or new grid, so that you can call it directly the next time the sorting algorithm is executed.

2. The new lattice is saved in the array as a parameter passed to the sorting algorithm, only to traverse and operate the newly-checked grid.

The third problem is that if the server cannot give a picture size, then you must be completely loaded after the picture can be sorted (because the height is real-time acquisition, the picture is not full height error), there is no good way, can only traverse the picture, each picture loaded successfully executed after a callback function, will load the number of successful pictures + 1, when loading the number of successful pictures equals the total number of pictures to perform the sorting method. The disadvantage is that there is a picture loading can not see all of the real project or need to load data asynchronously when the picture size.

Well, the above is the waterfall in the implementation of the process encountered problems and solutions, from the beginning of the load 3-4 screen on the card to die to now can be unlimited load (ff,chrome), deeply optimize the need for JS and infinite. A little bit of experience written here right when you think about the waterfall flow to achieve the optimization of the views of the welcome to exchange discussions.

Author: Xwei