瀑布流效果实现vue3

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

第一种方式：

1.

 2.

完整代码：

渲染

   <div class="login">
      <div class="item" v-for="(item, index) in tabList" :key="index">
         <img :src=item.picUrl alt="">
      </div>
   </div>复制

样式

.login {
   margin: 10px;
   column-count: 3;
   column-gap: 10px;
}
 
.item {
   margin-bottom: 10px;
}
 
.item img {
   width: 100%;
   height: 100%;
}复制

实例：

第二种方式：

.login {
   column-count: 4;
   /* //想要排成的列数 */
   column-gap: 0;
}
 
.item img {
   width: 100%;
}复制

 效果如下：

 第三种：

.login {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   /* 需要指定高度 */
   height: 1000px
}
 
/**新加入的代码*/
.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%;
} 复制

案例：