css---等宽瀑布流布局制作

瀑布流布局效果如下图：

当前项目需求，如下图：

商品展示，需要按接口返回的顺序展示，依次从左至右，从上至下。

 

 方案1：CSS3 column 属性(实现的布局顺序为先从上到下，再从左至右，所以这种方式仅适用于数据固定不变的情况，对于滚动加载更多等可动态添加数据的情况就并不适用了。)

关键思路：
column-count：指定列数
column-gap: 设置列之间的间距

关键代码：
<template>
  <div class="waterfall-width-column">
    <div class="image-box" v-for="img in imgList" :key="img">
      <img :src="img" alt="" />
　　　 <div>文字描述，文字长度不定</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.waterfall-width-column {
  column-count: 2;
  column-gap: 10px;
  .image-box {

　　　break-inside: avoid; /* 可选，用于防止项目在列之间断开 */

    img {
      display: block;
      width: 100%;
    }
  }
}
</style>


优势：更加简单，不用额外计算，直接使用CSS渲染高效。
劣势：图片的顺序是从上向下排列的，这个要看业务需求允不允许了。另外列数固定。

还你可以尝试通过媒体查询设置不同列数

@media (min-width: 768px) {
  .waterfall-width-column {
    column-count: 3;
  }
}
@media (min-width: 992px) {
  .waterfall-width-column {
    column-count: 4;
  }
}
@media (min-width: 1200px) {
  .waterfall-width-column {
    column-count: 6;
  }
}