Vue项目中 vue-waterfall-easy 瀑布流框架使用

1、Installation（安装）
进入到项目当前文件夹，执行命令：

npm install vue-waterfall-easy --save
2、引入vue-waterfall-easy
2.1、main.js中引入
import vueWaterfallEasy from ‘vue-waterfall-easy’
2.2、当前vue文件包含组件
export default {
name: ‘app’,
components: {
vueWaterfallEasy
}
//省略其他代码
}
3、HTML中引入组件

#content{
position: absolute; /必须/
top:32px; /top必须，大小可控制/
bottom:0; /bottom必须，一直延申到当前块底部/
width:100%;
}
4、vue-resource获取后端数据并显示在页面
export default {
name: ‘morePicture’,
components: {
vueWaterfallEasy
},
data() {
return {
imgsArr: [],
group: 0, // 当前加载的加载图片的次数
}
},
methods: {
getData() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.refs.waterfall.waterfallOver()
return
}
var dataList = res.data.data.dataList;
console.log(dataList);
console.log(Array.isArray(dataList));
for (let v of dataList) {
var picObj = {
“src”: “./…”,
“href”: “”,
“info”: “”
}
picObj[“src”] += v.imageUrl;
picObj[“href”] = v.imageKey;
picObj[“info”] = v.imageName;
this.imgsArr = this.imgsArr.concat(picObj);
}
}).catch((res) => {
console.log(res);
});
}
},
created() {
this.getData();
// 删除某个卡片
// setTimeout(()=>{
// this.imgsArr.splice(1,1)
// },2000)
},
mounted() {}
}
5、遗留问题
仍然布局问题，整个组件在移动端没有问题，但是在PC端浏览器中最大化时，页面渲染瀑布流部分遮挡，布局针对整个窗口进行改变。可能由于插件中计算样式依据document，而不是根据当前父元素布局计算。

问题布局

：