瀑布流随記

<template>
  <!-- 等高  -->
  <!-- <div class="waterfall-height-css">
    <div class="image-box" v-for="(item, index) in imglist" :key="index">
      <img class="lazy" :src="item" alt="" />
    </div>
  </div> -->

  <!-- 等寬  -->
  <div class="box">
    <div class="item" v-for="(item, index) in imglist" :key="index">
      <img class="lazy" :src="item" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imglist: [
        "xxx.jpg",
        "xxx.jpg",
        "xxx.jpg",
        "xxx.jpg",
        "xxx.jpg",
        "xxx.jpg",
        "xxx.jpg"
      ],
    };
  },
  methods: {},
};
</script>
<style scoped>
/* 等高 */
/* .waterfall-height-css {
  display: flex;
  flex-wrap: wrap;
}
.image-box {
  flex-grow: 1;
}
.lazy {
  display: block;
  min-width: 100%;
  height: 200px;
  object-fit: cover;
}
.waterfall-height-css:after {
  content: "";
  display: block;
  flex-grow: 99999;
} */

/* 等寬 */
.box {
  margin: 10px;
  column-count: 4;
  column-gap: 10px;
}
.item {
  margin-bottom: 10px;
  break-inside: avoid; /*避免在主體框中插入任何中斷（頁面，列或區域 */
}
.item img {
  width: 100%;
}
</style>