1.首先安装依赖

npm install --save vue-waterfall2

2.在main.js中引入

import waterfall from 'vue-waterfall2'
Vue.use(waterfall)

3.在需要使用的组件中引入(这里有一个坑，就是如果是嵌套在父组件的div中，那么waterfall必须定义高度，我是通过用document.documentElement.clientHeight时时获取body高度为waterfall动态添加高度)

<template>
  <div class="main">
    <el-row>
      <el-input v-model="content" :clearable="true" placeholder="请输入要搜索的模板" prefix-icon="el-icon-search" @change="change" />
    </el-row>
    <waterfall :height="wfHeight" :col="col" :data="data" @loadmore="loadmore" @scroll="scroll">
      <template class="templateStyle">
        <div class="elimg" style="width:90%;" v-for="item in data" :key="item.id">
          <div @click="templateDetail(item.id)">
            <el-image :src="item.imgUrl" alt="" />
          </div>
        </div>
      </template>
    </waterfall>
  </div>
</template>

<script>
import { templateDetail, templateList } from '@/api/index'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      title: '加载更多',
      loading: false,
      type: 1,
      content: '',
      actingOn: '',
      posterClass: '',
      belongTrade: '',
      style: '',
      color: '',
      span: 12,
      data: [],
      width: 1080,
      height: 1920,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      mycanvas: '',
      col: 2,
      wfHeight: "600px"
    }
  },
  computed: {
    ...mapState({
      fObj: state => state.fabricStore.fabricObject
    })
  },
  mounted() {
    this.getHeight()
    document.body.onresize = () => {
      this.getHeight()
    }
    new Promise(resolve => {
      this.width = this.fObj.width
      this.height = this.fObj.height
      console.log(this.height)
      if (this.height > 1200) {
        this.col = 2
      } else if (this.height < 1200) {
        this.col = 1
      }
    }).then(
      this.searchList()
    )
  },
  methods: {
    getHeight() {
      this.wfHeight = (document.documentElement.clientHeight - 120) + "px"
    },
    templateDetail(val) {
      this.$confirm('是否确定替换当前模板？', '请注意', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          id: val,
          type: 2
        }
        templateDetail(data).then(res => {
          this.$store.dispatch('fabricStore/editTempleteData', res.data)
          this.$emit('loadTempleteData')
        })
      })
    },
    searchList() {
      var data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        sortType: this.type,
        actingOn: this.actingOn,
        belongTrade: this.belongTrade,
        color: this.color,
        searchParam: this.content,
        style: this.style,
        use: this.posterClass,
        width: this.width,
        height: this.height
      }
      this.loading = true
      templateList(data).then(res => {
        this.loading = false
        this.data = [...this.data, ...res.data.list]
        this.total = res.data.total
        if (res.data.list[0] == undefined) {
          this.title = '没有更多数据了'
        }
      }).catch(() => { this.loading = false })
    },
    change() {
      this.data = []
      this.pageNum = 1
      this.searchList()
    },
    loadmore(index) {
      this.pageNum++;
      this.searchList();
    },
    scroll(scrollData) {
    }
  }
}
</script>

<style lang="scss" scoped>
.templateStyle {
  .el-row {
    .el-input {
      width: 90%;
      margin-top: 30px;
    }
    .el-col-12 {
      cursor: pointer;
      width: 45%;
      margin-top: 20px;
      margin-right: 2.5%;
      margin-left: 2.5%;
    }
    .el-col-24 {
      cursor: pointer;
      width: 90%;
      margin-top: 30px;
      margin-right: 5%;
      margin-left: 5%;
    }
  }
}
/deep/ {
  .el-input {
    width: 90%;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
.elimg {
  width: 90%;
  margin: 5%;
}
</style>