我的第二篇博客（vue中的瀑布流插件 vue-waterfall-easy）

vue-waterfall-easy是一款很好的瀑布流插件

以下是代码
转载自GitHub的官方文档
https://github.com/lfyfly/vue-waterfall-easy
以下是代码

<template>
      <div style="position: absolute; bottom: 0;top: 50px;width: 100%; margin-bottom: 60px;">
        <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData"></vue-waterfall-easy>
      </div>
</template>

<script>
    import vueWaterfallEasy from 'vue-waterfall-easy'
    import axios from 'axios'
    export default {
      name: "fishHistory2",
      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()
      }

    }
</script>

<style scoped>

</style>

以下是模拟接口的静态文件 data.json

[
  {
    "src": "./static/img/1.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/2.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/3.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/4.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/5.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/6.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/7.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/8.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/9.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/10.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/11.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/12.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/13.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/14.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/15.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/16.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/17.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/18.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/19.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "./static/img/20.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  }
]