纯css瀑布流

<template>
  <div class="box-app">
    <div class="backColor">
      <div class="imgFel">
        <div class="list" v-for="item in list" :key="item.img">
          <img :src="item.img" alt="" />
          <div class="bottomTxt">
            <h3>{{ item.direction }}</h3>
            <p>哇哈哈打折优化</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          img: "https://menghn.com/d/file/p/2020/05-22/5cf87ff65f64314284bf36557ba632e3.jpg",
          direction: "哇哈哈",
        },
        {
          img: "https://menghn.com/d/file/p/2020/05-22/b6472aa7e2229fe152f746eb31f2da34.jpg",
          direction: "哇哈哈1",
        },
        {
          img: "https://menghn.com/d/file/p/2020/05-22/a34cd05cbd4b30f51a134599e7793b90.jpg",
          direction: "哇哈哈2",
        },
        { img: "https://picsum.photos/360/460?random=1", direction: "哇哈哈3" },
        { img: "https://picsum.photos/360/520?random=2", direction: "哇哈哈4" },
        { img: "https://picsum.photos/360/420?random=3", direction: "哇哈哈5" },
        { img: "https://picsum.photos/360/420?random=4", direction: "哇哈哈6" },
        { img: "https://picsum.photos/360/480?random=5", direction: "哇哈哈7" },
        { img: "https://picsum.photos/360/500?random=6", direction: "哇哈哈8" },
        { img: "https://picsum.photos/360/500?random=7", direction: "哇哈哈9" },
        {
          img: "https://picsum.photos/360/400?random=8",
          direction: "哇哈哈10",
        },
        {
          img: "https://picsum.photos/360/440?random=9",
          direction: "哇哈哈哇哈哈",
        },
      ],
    };
  },
};
</script>
<style scoped>
.box-app {
  height: 100%;
}
.imgFel {/*关键代码*/
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari and Chrome */
  column-count: 2;
  column-gap: 0;
}
.imgFel img {
  width: 100%;
  display: block;
  height: auto;
  border-radius: 5px;
  object-fit: cover;/*防止图片变形*/
}
.list {
  padding:8px 2px;
  border-radius: 5px;
  overflow: hidden;
}
.bottomTxt {
  padding: 10px;
  background: #fff;
  min-height: 100px;
}
.backColor {
  background: #f8f8f8;
  min-height: 100%;
}
</style>