瀑布流效果实现vue3

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

第一种方式：

1.

 2.

完整代码：

渲染

1.  
   <div class="login">
2.  
   <div class="item" v-for="(item, index) in tabList" :key="index">
3.  
   <img :src=item.picUrl alt="">
4.  
   </div>
5.  
   </div>

样式

1.  
   .login {
2.  
   margin: 10px;
3.  
   column-count: 3;
4.  
   column-gap: 10px;
5.  
   }
6.  
    
7.  
   .item {
8.  
   margin-bottom: 10px;
9.  
   }
10.  
     
11.  
    .item img {
12.  
    width: 100%;
13.  
    height: 100%;
14.  
    }

实例：

第二种方式：

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

 效果如下：

 第三种：

1.  
   .login {
2.  
   display: flex;
3.  
   flex-direction: column;
4.  
   flex-wrap: wrap;
5.  
   /* 需要指定高度 */
6.  
   height: 1000px
7.  
   }
8.  
    
9.  
   /**新加入的代码*/
10.  
    .item:nth-child(4n 1) {
11.  
    order: 1;
12.  
    }
13.  
     
14.  
    .item:nth-child(4n 2) {
15.  
    order: 2;
16.  
    }
17.  
     
18.  
    .item:nth-child(4n 3) {
19.  
    order: 3;
20.  
    }
21.  
     
22.  
    .item:nth-child(4n) {
23.  
    order: 4;
24.  
    }
25.  
     
26.  
    /**新加入的代码*/
27.  
    .item {
28.  
    width: 25%;
29.  
    position: relative;
30.  
    counter-increment: item-counter;
31.  
    }
32.  
     
33.  
    .item img {
34.  
    width: 100%;
35.  
    }

案例：

这篇好文章是转载于：学新通技术网