简单两句css实现高大上的瀑布流，并且随着屏幕大小改变列数
2019-03-06 本文已影响86人
辉夜真是太可爱啦
瀑布流
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 列数你可以自己根据需要设置
.masonry {
column-count:4; //设置列数
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
}
