vue3使用vue-masonry插件实现瀑布流

<template>
  <div class="grid">
    <div
      v-for="item in items"
      :key="item.id"
      class="grid-item"
    >
      <!-- 这里可以放置你的图片或内容 -->
      <img :src="item.src" alt="grid-item">
    </div>
  </div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import VueMasonry from 'vue-masonry-css';
 
export default {
  components: {
    VueMasonry,
  },
  setup() {
    const items = ref([
      // 填充你的图片数据
      { id: 1, src: 'path/to/image1.jpg' },
      // ...
    ]);
 
    onMounted(() => {
      // 在这里可以获取数据并操作 Masonry 实例
    });
 
    return { items };
  },
};
</script>
 
<style>
.grid {
  max-width: 1200px;
  margin: auto;
}
.grid-item {
  /* 设置你的 grid item 样式 */
}
</style>

这个例子展示了如何在 Vue 3 中使用 vue-masonry-css 插件来创建一个瀑布流布局。在 <template> 中，我们使用 v-for 指令来遍历 items 数组，并为每个项目创建 .grid-item 容器。在 <script> 中，我们导入了必要的 Vue 3 函数式 API，并定义了一个简单的 items 数组来模拟图片数据。在 setup 函数中，我们返回了 items 以便在模板中使用。最后，在 <style> 中定义了基本的 CSS 样式来美化网格布局。