vue-waterfall2瀑布流插件是项目使用

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

npm i vue-waterfall2

main,js引入

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

使用了xxx.vue页面
vue-waterfall2瀑布流插件是项目使用_第1张图片
vue-waterfall2瀑布流插件是项目使用_第2张图片
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中即可)
},
效果
vue-waterfall2瀑布流插件是项目使用_第3张图片

你可能感兴趣的:(vue-waterfall2瀑布流插件是项目使用)