vue的瀑布流插件很多，很多又兼容问题或则跟自己项目不符合；废话不多说上代码

npm i vue-waterfall2

main,js引入

import waterfall from ‘vue-waterfall2’
Vue.use(waterfall)

使用了xxx.vue页面


width和gutterWidth必须一起使用 页面不能使用scope

created的时候调下面两给方法

itemWidth(){
return (1851(document.documentElement.clientWidth/375)) // #rem布局 计算宽度
},
gutterWidth(){
return (100.5(document.documentElement.clientWidth/375)) // #rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
},
效果