The content of the waterfall layout is usually flat and trivial. The first thing that attracts people should be the pictures, and the pictures are uneven. If there are too many words in the waterfall, it will give people a very messy feeling, so the waterfall is more whatsapp database suitable for simple picture browsing. Not long ago, the project launched by 360 Company, the beauty show channel of 360 image search , used the layout method of waterfall flow. It is quite appropriate to use waterfall flow for this kind of pure beauty picture page. I have not developed a website with waterfall flow layout before, and the first implementation method that comes to my mind is multi-column whatsapp database floating. On the surface, this method is simpler. Traditional positioning layout However, the current mainstream waterfall flow layouts use the positioning method to calculate the positioning value for each cell, as shown in the following figure.
Waterfall layout realized by positioning The positioning method is actually simple to implement. When the window is resized, it is also convenient to recalculate and sort the cells. However, the frequency of calculation is relatively high. If you want whatsapp database to load data infinitely and adaptively arrange it during resize, then performance is a problem that must be paid attention to. If there is no optimization method, hundreds or thousands of cells are very resource-intensive, and they will all be recalculated when they are resized. It is conceivable that the browser must be very difficult at this time, and there will inevitably be a situation where the browser whatsapp database suspends. Multi-column floating layout Let's take a look at the implementation of the multi-column floating layout. Multiple cells form a column, and there is no need to calculate the positioning of a single cell, and then float the entire column, as shown below: Waterfall flow layout implemented by multi-column floating method.
Of course, this layout method faces the same problem in the face of infinite loading and adaptive resize. adaptive window Let’s talk about the layout adaptation during resize first. Although the calculation of floating layout is not as convenient as whatsapp database positioning, it is still possible to achieve adaptive layout. For example, there are originally 4 columns, but the page width becomes smaller when resize, and only 3 columns can be placed. The total number of cells is unchanged, and the order of data is also fixed, then only the cells in the original 4 columns are whatsapp database cleared. The sort is recalculated according to the order of the data and added to the 3 columns one after the other. It should be noted that when emptying, the DOM element of the cell is not deleted, but extracted from the DOM tree and stored in a document fragment.