JS case 6-Waterfall stream layout (1)

JS case 6-Waterfall stream layout (1)
In actual projects, a waterfall flow layout is occasionally used. Waterfall flow layout is characterized by ensuring that content blocks do not have large gaps in the horizontal direction during multi-column layout, similar to the waterfall effect. To put it simply, in the vertical list, the content block is one by one. When the content is large and not fixed, it depends on the order of the html structure, which is very limited. Here is a simple example. As long as the number and width of the list are input, the data can be dynamically put into the corresponding column. Principle 1. Define two containers. One is to store the content, and the other is to display the list. 2. Store the offsetHeight of each column in an array, obtain the smallest column, and put the data in the smallest column. When the container that stores the content is empty, it indicates that all the data in the container has been placed in the corresponding column. Note: This function must be executed after window. onload. Otherwise, the height of each content block cannot be read, leading to inaccurate offsetHeight of each column. Source code: Copy code 1 <! DOCTYPE html> 2