瀑布流
HTML部分
<div class="masonry">
? <div class="item" v-for="(item,index) in info" :key="index">
? ? ? <img :src="item.images" v-preview="item.images" alt="" class="album-images">
????</div>
</div>
CSS部分，還用了媒體查詢驯遇，column-count 列數(shù)你可以自己根據(jù)需要設(shè)置
.masonry {
column-count:4;? ? ? ?//設(shè)置列數(shù)
? column-gap:0;
}
@media screen and (max-width:500px) {
.masonry {
column-count:2;
? ? column-gap:0;
? }
}
@media screen and (max-width:1100px) {
.masonry {
column-count:3;
? ? column-gap:0;
? }
}
.item {
break-inside:avoid;
? box-sizing:border-box;
? padding:5px;
}
.album-images{
width 100%
cursor zoom-in
? height auto
}
