瀑布流效果实现vue3

Sink_web

已于 2023-04-12 10:45:24 修改

阅读量2.2k

点赞数 1

文章标签： html 前端 java

于 2023-04-11 11:55:58 首次发布

本文链接：https://blog.csdn.net/adminmijinlin/article/details/130080071

版权

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

第一种方式：

完整代码：

渲染

   <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%;
}

案例：