vue瀑布流插件vue-waterfall-easy 2.x

不知道大家都是怎么用瀑布流的，一开始尝试用flex布局失败，后面找到了这个组件，还是挺好用的，记录一下。

首先是用npm安装npm install vue-waterfall-easy --save-dev
然后用import引用

import vueWaterfallEasy from 'vue-waterfall-easy'
export default {
  name: 'app',
  components: {
    vueWaterfallEasy
  }
}

在部分我写的是，除了图片，下面还有一些描述信息，所以加了插槽，以及手动调用了取消滚动加载
一定要记得在组件上加上ref='waterfall'，否则会undefined的

在 slot-scope="props"的div里，可以自定义修改每个图片所需要的信息

            <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getDataList" class="waterfull" ref='waterfall'>
                <div class="img-info" slot-scope="props">
                    <div class="user">
                        <span>{{props.value.name}}</span>
                        <span @click='imgLike(props.value.id,props.value.isDianZan)'>
                            <img
                                :src="props.value.isDianZan == 0 ? 'https://g-shot.oss-cn-hangzhou.aliyuncs.com/h5/28ac6d226cb5526e/img/6-32.png': 'https://g-shot.oss-cn-hangzhou.aliyuncs.com/h5/28ac6d226cb5526e/img/6-31.png'">
                        </span>
                    </div>
                </div>
                <div slot="waterfall-over">已经到底啦</div>
            </vue-waterfall-easy>

js部分：

import vueWaterfallEasy from './vue-waterfall-easy/vue-waterfall-easy.vue'
import axios from 'axios'

export default {
  name: 'app',
  data() {
    return {
      imgsArr: [],
      group: 0, // request param
    }
  },
  components: {
    vueWaterfallEasy
  },
  methods: {
    getData() {
      axios.get('./static/mock/data.json?group=' + this.group) // 真实环境中，后端会根据参数group返回新的图片数组，这里我用一个惊呆json文件模拟
        .then(res => {
          this.imgsArr = this.imgsArr.concat(res.data)
          this.group++
        })
    },
  },
  created() {
    this.getData()
  }
}

这里要注意，存图片链接的关键字必须是“src”,所以new了一个类来存所有从接口取到的要用到的值。

    export class Img {
        constructor({
            id,
            src,
            isDianZan,
            name
        }) {
            this.id = id
            this.src = src
            this.isDianZan = isDianZan
            this.name = name
        }
    }
    export function CreateImg(imgData) {
        return new Img({
            id: imgData.id,
            src: imgData.src,
            isDianZan: imgData.isDianZan,
            name: imgData.name
        })
    }