vue-masonry加载

Vue-Masonry 是一个 Vue.js 的插件，可以帮助你在网格布局中快速加载图片并进行排列。它的使用相对简单，你需要先在项目中安装该插件，可以使用 npm 或 yarn 进行安装：

npm install vue-masonry --save

或

yarn add vue-masonry

安装完成后，在你的 Vue 组件中引入 vue-masonry，然后在模板中使用它提供的 Masonry 组件。

首先在组件中引入：

import VueMasonry from 'vue-masonry-css';
export default {
  components: {
    VueMasonry
  }
}

然后在模板中使用 Masonry 组件：

<vue-masonry>
  <div v-for="(item, index) in items" :key="index" class="item">
    <img :src="item.img">
  </div>
</vue-masonry>

在这个例子中，我们使用 v-for 循环遍历 items 数组中的每一个元素，然后渲染一个包含图片的 div。vue-masonry 会根据图片的高度自动进行排列。如果你的图片高度不一致，那么 Masonry 组件会自动调整它们的位置，以达到最优的排列效果。