官方文档：/shershen08/vue-masonry

VueMasonry (v3 + ts + vite)

安装

pnpm install vue-masonry --save

引入

// main.tsimport {VueMasonryPlugin } from 'vue-masonry';app.use(VueMasonryPlugin);

使用

在父元素上添加v-masonrytransition-duration="0.25s"item-selector=".item"(.item 必须和子元素的类名一致)

更多配置请查看官网：properties

手动刷新 $redrawVueMasonry

方法一：

// 获取当前实例，调用 $redrawVueMasonryconst that = getCurrentInstance()?.appContext.config.globalProperties;// 调用that?.$redrawVueMasonry();

方法二：

// 使用 provide / injectconst $redrawVueMasonry = inject('redrawVueMasonry') as Function;// 调用$redrawVueMasonry();

方法三

// 往要渲染的数据里添加新的数据，// v-for 循环时 再用v-if过滤一下// 示例imageList.push({id: 'temp' + Math.random(), ... })// html:<template><div v-for="item in imageList" :key="item.id"><div v-if="!id.include('temp')">...</div></div></template>

源码：