瀑布流布局

瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感，今天学习了一下如何使用瀑布流布局，总结了有以下三种方式。（瀑布流还可以使用grid布局实现，还没有学习过这种方式）

瀑布流的实现方法可以用纯CSS，也可以用JS实现，如何选取决于需求,这几种方法各有优略，如何选取取决于需求。以下案例均采用如下的html代码

        

                
        
        

                
        
        

                
        
        

                
        
        

                
        
        

                
        
        

                
        
        

                
        
        

                
        
        

            
        
        

                
        
        

                
        
        

            
        
        

                
        
        

                
        
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

1.CSS布局

使用column-count属性

实现代码:

 .container{
            column-count: 4;//想要排成的列数
            column-gap: 0;
        }
        .item img{
            width: 100%;
        }
1
2
3
4
5
6
7

实现效果：

使用column-count属性将一个盒子分为多列展示数据 ，使用column-gap：0px将列间间距设置未0，方便我们自定义间距。

• 优点：

1. 简单，只需给父盒子两行代码
2. 列数不会随着浏览器的宽度而改变，例如：指定列数为4就只能显示4列

• 缺点:如下图，我们可以看到，图片的位置是按照从上往下排序，如果我们需要一些动态加载图片的业务，那么新加入的图片将不会加入页面的最低端，不符合我们的业务需求

使用flex布局

实现代码:

 .container{
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            /* 需要指定高度 */
            height: 800px;
        }
        .item{
            width: 25%;
        }

        .item img{
            width: 100%;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

实现效果:

使用弹性盒子，给弹性元素指定列排列，然后给每个元素指定宽度(宽度设置为（1/列数）如果想要排成4列就设置成25%,如果想要排成5列就设置成25%以此类推)。
由于设置为列排列，当元素的累计高度没有超过指定的高度时，首先会在第一个列上堆叠元素

由于我们设置了flex-wrap:wrap导致如果超出了设置的高度，元素将会换行，由于我们设置的排列方向是按列排列，因此超出的元素将会展示在第二列

以此类推，只要我们元素的数量合适，能够在指定的高度下填满4列，就能完成瀑布流了布局了，可以看见此时还是图片按照列的顺序排列的，仍然无法做到新的图片展示在下方的业务。

优化

	.container{
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            /* 需要指定高度 */
            height: 1600px
        }
        /**新加入的代码*/
        .item:nth-child(4n+1){
            order: 1;
        }
        .item:nth-child(4n+2){
            order:2;
        }
        .item:nth-child(4n+3){
            order: 3;
        }
        .item:nth-child(4n){
            order: 4;
        }
        /**新加入的代码*/
        .item{
            width: 25%;
            position: relative;
            counter-increment: item-counter;
        }

        .item img{
            width: 100%;
        }
        .item::after{
            position:absolute;
            background-color: red;
            color: white;
            left: 0;
            top: 0;
            content: counter(item-counter);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

期望得到这样的效果:

实际的效果却是:

几经查证发现，由于图片大小差距过大，导致每一行显示图片的数量不一样，导致order失效。
但当每一列图片数量相等的时候，可以达成想要的效果

总结:

• 优点:

1. 同样相对简单
2. 如果每列数量差图片数量相同，则可以实现新的图片显示在最下方的业务

• 缺点:

1. 列数不会随着浏览器的宽度而改变
2. 需要指定高度，并且在每一列放置合适数量的图片。
3. 如果没有给容器设置固定宽度，则当容器宽度缩小时，图片的宽度相应的缩小，由于图片的高度是auto，即按图片原比例展示，因此图片高度会相应减少，由于高度指定，图片数量固定，则可能会出现图片占不满列数的情况，，具体问题如下图

JS 方法实现

原理:通过JS，根据每个图片的宽度计算出需要放置多少行，将所有图片设置绝对定位，逐一计算出该图片所在的top和left进行定位
实现代码:

		.container{
            position: relative;
        }
        .item{
            width: 200px;
            height: auto;
            position: absolute;
        }

        .item img{
            width: 100%;
        }



//当页面加载的时候调用
window.onload = function(){
	//页面初始化调用
    waterFall()
    //每次页面改变大小调用
    window.onresize = waterFall
}
function waterFall(){
   // 1. 设置container盒子的宽度
   //      注意：浏览器的可视区域的宽度 / 一个item元素的宽度 = 一行的排列的元素的个数
   let container = document.getElementById("con")
   let item = document.getElementsByClassName("item")
   //获取元素的宽度(含border，padding)
   let width = item[0].offsetWidth 
   //计算出浏览器窗口的宽度
   let clientWidth = document.documentElement.clientWidth;
   //计算出应该放几列（向下取整）
   let columnCount = Math.floor(clientWidth / width)
   //设置容器（父盒子）的宽度
   container.style.width = columnCount*width+"px"

   // 2.设置每一个item元素的排列位置
   //  第一行整体的top值都是0 后面的依次找上一行高度最小的容器，在它下面进行排列
   let hrr = []
   for(let i= 0 ;i