用 Vue JS 砌体

Question

当我加载页面时，网格如下所示：

只有当我重新调整屏幕大小时（我左右拖动边框）它看起来没问题：

这是我的组件中的代码：

<template>
  <div class="grid">
    <div class="grid-item" v-for="(data, index) in data" :key="index">
      <router-link :to="{ name: 'painting', params: { id: index } }">
        <img v-bind:src="publicURL + data.images.thumbnail.substring(1)" />
      </router-link>
    </div>
  </div>
</template>

<script>
import data from "../assets/data.json";

export default {
  name: "Galleria",
  components: {},
  created() {
    this.publicURL = "https://6e222.csb.app";
  },
  mounted() {
    let grid = document.querySelector(".grid");
    this.msnry = new Masonry(grid, {
      columnWidth: 25,
    });
  },
  data() {
    return {
      data: data,
    };
  },
};
</script>

Answer 1

这是因为你的块的高度取决于图像的高度 在第一种情况下，砌体尝试读取元素的高度并仅获取填充值

您需要等待图片加载