瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。
第一种方式:
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%;
}
案例: