Vue+Bootstrap+masonry瀑布流2

安装依赖

npm install vue-masonry --save

index.html文件中引入js

<script async defer src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script>

main.ts/main.js配置

import { createApp } from 'vue'
import {VueMasonryPlugin} from 'vue-masonry';

let app = createApp(App)
app.use(VueMasonryPlugin)
app.mount('#app')

在具体的.vue中使用

其中，最外层的容器用 v-masonry 属性，里面每一个循环输出部分用 v-masonry-tile 属性

<div v-masonry="containerId" transition-duration="0.3s" item-selector=".item">
  <div v-masonry-tile class="item" v-for="(item, index) in blocks">
    <!-- block item markup -->
  </div>
</div>