记录vue-waterfall-easy的踩坑之路

记录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>

这个插件的问题是

1. 排列的图片超过当前屏幕显示的高度时，即出现下滑时，才能无限滚动加载

2. 当此瀑布流不是单一页面时，需要通过slot="waterfall-head"解决，子组件开发时需要放在父组件中使用，即子组件都要在父组件的<div slot="waterfall-head">（子组件）</div>中使用，虽然可以放在其中使用，但是如果子组件较为复杂，容易出现很多问题，不建议这样使用

3. 有其他内容时出现两个滑动条，去掉自带的即可（可能出现其他问题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