vue瀑布流布局插件vue-masonry

1. 插件npm网址 https://www.npmjs.com/package/vue-masonry
2. github ：https://github.com/shershen08/vue-masonry
3. 安装 npm install vue-masonry --save || yarn add vue-masonry --save

4. //main.js
   import {VueMasonryPlugin} from 'vue-masonry'
   Vue.use(VueMasonryPlugin)
   

5. <div v-masonry transiton-duration="0.3s" item-selector=".card" gutter="10">
       <div v-masonry-tile class="card" v-for="(item,index) in testData" :key="index" >
   	/*内容*/
   	</div>
   </div>
   

6. 一些属性
   this.$redrawVueMasonry(); 重加载
   item-selector=".item" 列表DOM项目选择器（类）
   transition-duration="0.3s 过渡效果
   gutter=".gutter-block-selector 项目元素之间的水平间距

vue3

1.重加载

import { defineComponent, ref, nextTick, getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties;
 _this.$redrawVueMasonry();