Waterfall Flow: The first line floats normally. Starting from the second line, each element is positioned below the minimum height of the previous line.

1. Getting Elements

2. Layout

3. Distinguish the first row from the back row

4. Find all the heights in the first line

5. Find the minimum height in the next row

Set the location, left, top

6. Minimum height before modification

The idea is that the difficulty here lies in finding the first line and the minimum height. The list of ideas will be clear enough to know what to do; therefore, it is more recommended to use object oriented to write, and subsequent use will be more. These small cases can be used to practice and increase proficiency.

 1     function Waterfall(){
 2             // 1.Get elements
 3             this.ocont = document.querySelector(".cont");
 4             this.abox = document.querySelectorAll(".box");
 5 
 6             // Array to store all heights of the first line element in the future
 7             this.heightArr = [];
 8 
 9             // 2.layout
10             this.init()
11         }
12         Waterfall.prototype.init = function(){
13             // layout
14             this.num = Math.floor(document.documentElement.clientWidth / this.abox[0].offsetWidth)
15 
16             this.ocont.style.width = this.num * this.abox[0].offsetWidth + "px";
17             // 3.Distinguish the first line
18             this.firstLine();
19             // And the following lines
20             this.otherLine();
21         }
22         Waterfall.prototype.firstLine = function(){
23             // 4.In the first line, find all the heights in the first line
24             for(var i=0;i<this.num;i++){
25                 this.heightArr.push(this.abox[i].offsetHeight)
26             }
27         }
28         Waterfall.prototype.otherLine = function(){
29             // 5.In the back row, find the minimum height
30             for(var i=this.num;i<this.abox.length;i++){
31                 var min = getMin(this.heightArr);
32                 var minIndex = this.heightArr.indexOf(min);
33                 // Set the location. left，top
34                 this.abox[i].style.position = "absolute";
35                 this.abox[i].style.top = min + "px";
36                 this.abox[i].style.left = minIndex * this.abox[0].offsetWidth + "px";
37                 // 6.Minimum height before modification
38                 this.heightArr[minIndex] += this.abox[i].offsetHeight;
39             }
40         }
41 
42         function getMin(arr){
43             // Note the deep and shallow copies of arrays: deep copies
44             var myarr = [];
45             arr.forEach(val => {
46                 myarr.push(val);
47             });
48             return myarr.sort((a,b)=>a-b)[0];
49         }

There is also an infinite load of small functions, let me briefly talk about ideas, you can write and see!