首页 前端知识 瀑布流效果实现vue3

瀑布流效果实现vue3

2024-02-05 11:02:04 前端知识 前端哥 579 892 我要收藏

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

第一种方式:

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

案例:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1315.html
标签
评论
发布的文章

Web10--jQuery进阶

2024-02-19 09:02:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!