Front-end Implementation of "template method" learning class Pinterest waterfall stream

Nowadays, Pinterest-like websites are getting more and more popular, and waterfall streams are getting more and more popular. But for our front-ends, waterfall implementation is what we are most concerned about. For the moment, I think there are two main types:

• Multiple floating columns with a fixed number of columns (mogujie.com and other websites) are usually fixed in this way, and the display is good. The browser can easily explain the problem.
• Combined with absolute positioning and relative positioning (Pinterest and other websites), the system dynamically calculates the number of columns to maximize the amount of information displayed. When the display area is frequently changed, the browser is sometimes difficult

I have always been interested in new things. Today I will use a set of WordPress templates to learn the second implementation method.

First, describe the misunderstandings you have encountered in locating the problem:Absolute stands for absolute meaning in English, but in reality it is positioned for the parent element. If the parent element does not have position: relative | absolute, the next parent element is traced until it is located relative to the upper-left corner of the document. Therefore, it is impossible to default that absolute is located relative to the upper-left corner of the page, which will greatly bury the functions and usage of absolute.

Every time I see a novel layout, I will find a similar WordPress template on the Internet. In this way, I can view the display effect intuitively or modify the display effect.CodeLater, I tried to see the results. The WordPress template we found today is named imbalance-2 (ArticleAt the end of the page). It leverages the jquery masonry plug-in to implement waterfall streams. masonry is a jquery-based page layout plug-in. Let's take a look at the code output to the foreground.

 

The style in the data block is dynamically generated by JavaScript. This also indicates that after the browser obtains the size of each element on the page, it will take all the data blocks in the container in sequence, first, find the column with the smallest current height, and then determine the left and top values of the data block based on the column number. Left is the sequence number of the column to be located multiplied by the column width, and top is the current height of the column to be located, finally, the current height of the column to be updated is added with the height of the data block element. At this point, an element is inserted and all the data blocks to be displayed are arranged in sequence. Of course, this process is done internally by masonry.

Another important part is loading data. When users need to flow down the waterfall, they need to asynchronously load more data blocks and re-layout them. The loaded trigger event is rolled to the bottom of the page, but you can also click the Load button (the method used in this template) and so on. When data is loaded, the data block is displayed according to the preceding process. The data display area # boxes recalculates the height.

If you use WordPress, you can study the waterfall stream together. This may be a good waterfall stream. After talking about it for a long time, let's take a look at the results here, as well as imbalance-2.