vue3 masonry-layout

### 如何在 Vue3 中实现 Masonry-Layout 效果

为了在 Vue 3 中应用 `masonry` 布局效果，可以采用 `vue-masonry-css` 插件。此插件支持 Vue 3 并且可以在 TypeScript 环境下无缝工作。

#### 安装依赖包
通过 npm 来安装所需的库：

npm install vue-masonry-css --save-dev

#### 初始化配置
对于 Vue 3 应用程序，在主文件（通常是 `main.ts` 或者 `main.js`）中初始化该插件:

import { createApp } from 'vue';
import App from './App.vue';
// 导入 masonry plugin
import { VueMasonryPlugin } from 'vue-masonry';

const app = createApp(App);
app.use(VueMasonryPlugin);

app.mount('#app');

#### 组件内使用
下面是一个简单的组件例子来展示如何创建一个具有 `masonry` 风格布局的内容列表：

<template>
  <div class="masonry-container">
    <!-- 使用 v-masonry 指令 -->
    <v-masonry>
      <v-masonry-tile v-for="(item, index) in items" :key="index">
        <img :src="item.src"/>
      </v-masonry-tile>
    </v-masonry>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: "ImageGrid",
  data() {
    return {
      items: [
        { src: '/path/to/image1.jpg' },
        { src: '/path/to/image2.png' },
        // 更多图片...
      ]
    }
  }
});
</script>

<style scoped>
.masonry-container {
  /* 自定义样式 */
}
</style>

上述代码展示了如何利用 `vue-masonry-css` 实现响应式的瀑布流布局[^4]。