css 完成瀑布流

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
}