记录vue-waterfall-easy的踩坑之路
今天下午准备完成主页的vue瀑布流布局，考虑到布局之后还有无限滚动加载，所以打算直接找一个插件来完成
vue-waterfall
首先试的vue-waterfall这个插件，waterfall是一个vue.js瀑布流布局组件，基于vue2.x
安装：
npm install --save vue-waterfall
引入：
ES6
/* in xxx.vue */import Waterfall from 'vue-waterfall/lib/waterfall'
import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'export default {components: {Waterfall,WaterfallSlot}
}
但是这个插件的问题是传入的图片需要给它宽度和高度，所以只能预先写在传入的数据里面，无法判断图片高度的情况下，高度无法自适应。接下来，看到了另外一个插件——vue-waterfall-easy，于是开始了vue-waterfall-easy的踩坑之路
github地址：https://github.com/MopTym/vue-waterfall
vue-waterfall-easy
vue-waterfall-easy是一个vue组件，包含瀑布流布局和无限滚动加载。相比其他实现方式，无需在返回的数据中指定图片的宽度和高度
安装：
npm install vue-waterfall-easy --save-dev
引入：
Es6： import vueWaterfallEasy from 'vue-waterfall-easy'export default {name: 'app',data() {return {imgsArr: [],group: 0,// request param}},components: {vueWaterfallEasy},methods: {getData() {axios.get('./static/mock/data.json?group=' + this.group).then(res => {this.imgsArr = this.imgsArr.concat(res.data)this.group++})},},created() {this.getData()}}
<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData"></vue-waterfall-easy>
这个插件的问题是
-
排列的图片超过当前屏幕显示的高度时，即出现下滑时，才能无限滚动加载
-
当此瀑布流不是单一页面时，需要通过slot="waterfall-head"解决，子组件开发时需要放在父组件中使用，即子组件都要在父组件的
<div slot="waterfall-head">（子组件）</div>中使用，虽然可以放在其中使用，但是如果子组件较为复杂，容易出现很多问题，不建议这样使用 -
有其他内容时出现两个滑动条，去掉自带的即可（可能出现其他问题QAQ，比如瀑布流常见的回到顶部，当去掉自带的时，本插件position脱离文档流，很难实现该功能）
使用方式：
<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData"><div slot="waterfall-head">waterfall-head</div>
</vue-waterfall-easy>
github地址：https://github.com/lfyfly/vue-waterfall-easy