图片瀑布流

最新推荐文章于 2024-11-02 12:42:04 发布

Ann_R

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量129

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ann_52547/article/details/132457609

版权

<template>
  <div>
    <!-- 瀑布流布局列表 -->
    <div class="pubuBox">
      <div class="pubuItem">
        <div
          class="item-masonry"
          v-for="(item, index) in coachDetails"
          :key="index"
        >
          < img :src="item.imgSrc" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      coachDetails: [
        {
          id: 1,
          imgSrc: require('@/assets/images/editor-drag/a1.jpg')
        },
        {
          id: 2,
          imgSrc: require('@/assets/images/editor-drag/a2.jpg')
        },
        {
          id: 3,
          imgSrc: require('@/assets/images/editor-drag/格桑花.jpg')
        },
        {
          id: 4,
          imgSrc: require('@/assets/images/editor-drag/a2.jpg')
        },
        {
          id: 5,
          imgSrc: require('@/assets/images/editor-drag/格桑花.jpg')
        },
        {
          id: 6,
          imgSrc: require('@/assets/images/editor-drag/格桑花.jpg')
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
// 瀑布start
.pubuBox {
  width: 100%;
  height: 100%;
}

.pubuItem {
  column-count: 2;
  column-gap: 20rpx;
}

.item-masonry {
  box-sizing: border-box;
  border-radius: 15rpx;
  overflow: hidden;
  // background-color: #fff;
  break-inside: avoid;
  /*避免在元素内部插入分页符*/
  box-sizing: border-box;
  // margin-bottom: 10rpx;
  // box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);

  img {
    width: 100%;
    margin-bottom: 12rpx;
  }
}
// 瀑布end
</style>