瀑布流随记

最新推荐文章于 2024-06-13 08:54:40 发布

小姚同志yao

最新推荐文章于 2024-06-13 08:54:40 发布

阅读量142

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/yao_1063066968/article/details/112680950

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<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>