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中即可)
},
效果