Vue常用插件：vue-waterfall2

简介

vue的瀑布流布局插件

特点

• 不需知道元素宽高，可宽高自适应
• 支持无图模式,内容自定义程度高
• 支持懒加载(lazy-src)
• 提供Event:loadmore (pc/android端滑动到底部触发，ios端需要上拉触发)
• 使用极为简便,适用于PC/ios/android

步骤

安装

• 安装：npm i vue-waterfall2 --save

引入

• 修改src/main.js

import Vue from 'vue'
import waterfall from 'vue-waterfall2'

Vue.use(waterfall)

使用

<div class="list-container" id="gameListContainer">
  <waterfall class="list" :col="waterfall.col" :data="list" @loadmore="loadmore" @scroll="scroll">
    <template>
      <list-item v-for="(item, index) in list" :key="index" :width="waterfall.width" :item="item" :index="index" :active="active" @change="handleChange"></list-item>
    </template>
  </waterfall>
</div>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    col: {
      type: Number,
      default: 4
    },
    width: {
      type: Number,
      default: 292
    },
    gutterWidth: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      active: -1,
      waterfall: {
        col: 3,
        width: 340
      }
    }
  },
  mounted() {
    this.calcWaterfall()
    window.addEventListener('resize', this.calcWaterfall)
  },
  destroyed() {
    window.removeEventListener('resize', this.calcWaterfall)
  },
  methods: {
    handleChange(index) {
      this.active = index
      // this.$emit('play', true)
    },
    loadmore(index) {
      // this.$emit('loadmore', index)
    },
    scroll(scrollData) {
      // this.$emit('scroll', scrollData)
    },
    calcWaterfall() {
      let elParent = document.getElementById('waterfallContainer')
      if (elParent) {
        let width = elParent.offsetWidth
        let col = Math.round((width + 20) / 360)
        this.waterfall.col = col < 1 ? 1 : col
        this.waterfall.width = col < 1 ? width : (width / col) - 20
      }
    }
  },
  components: {
    listItem
  }
}
</script>

备注

• gutterWidth需要与width一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出自适应后的宽度再传值)
• 使用了waterfall的父组件,如果样式存在问题，可去掉css scoped尝试一下

API

属性

懒加载

具体使用见：vue-lazyload

<!-- demo -->
<waterfall :col='col' :data="data">
  <template>
    <img v-if="item.img" :lazy-src="item.img" alt="加载错误"  />
  </template>
</waterfall>

Events

$waterfall

this.$waterfall.forceUpdate()   // forceUpdate

参考链接

• vue-waterfall2