简单两句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

}