vue2封装瀑布流组件

实现瀑布流布局的方法有很多种，这里介绍一种使用Vue2封装瀑布流组件的方法。

首先，我们需要引入一个瀑布流插件。这里推荐使用Masonry.js（https://masonry.desandro.com/）。通过npm安装：

npm install masonry-layout

然后在Vue组件中引入并初始化Masonry：

import Masonry from 'masonry-layout';

export default {
  name: 'WaterfallFlow',
  mounted () {
    this.masonry = new Masonry('.waterfall-flow', {
      itemSelector: '.waterfall-flow-item',
      columnWidth: 200, // 每列的宽度
      gutter: 10, // 列与列之间的间距
      fitWidth: true // 是否自适应容器宽度
    });
  },
  methods: {
    reload () {
      this.masonry.reloadItems();
      this.masonry.layout();
    }
  }
}

接下来，我们需要在模板中渲染出瀑布流的布局。这里我们可以使用`v-for`指令来循环渲染出每个瀑布流项，并使用`ref`指令来获取瀑布流容器的DOM对象：

<template>
  <div class="waterfall-flow" ref="waterfallFlow">
    <div class="waterfall-flow-item" v-for="(item, index) in items" :key="index">
      <!-- 瀑布流项的内容 -->
    </div>
  </div>
</template>

最后，我们需要在组件中监听窗口大小的变化，并在变化时重新布局瀑布流。这里我们可以使用`window.resize`事件来监听窗口大小的变化，并在事件回调中调用`reload`方法重新布局瀑布流：

export default {
  name: 'WaterfallFlow',
  mounted () {
    // 初始化瀑布流
    this.masonry = new Masonry('.waterfall-flow', {
      itemSelector: '.waterfall-flow-item',
      columnWidth: 200,
      gutter: 10,
      fitWidth: true
    });
    // 监听窗口大小变化
    window.addEventListener('resize', this.reload);
  },
  beforeDestroy () {
    // 销毁瀑布流
    this.masonry.destroy();
    // 移除窗口大小变化监听
    window.removeEventListener('resize', this.reload);
  },
  methods: {
    reload () {
      // 重新布局瀑布流
      this.masonry.reloadItems();
      this.masonry.layout();
    }
  }
}

这样就完成了一个简单的Vue2瀑布流组件的封装。完整代码如下：

<template>
  <div class="waterfall-flow" ref="waterfallFlow">
    <div class="waterfall-flow-item" v-for="(item, index) in items" :key="index">
      <!-- 瀑布流项的内容 -->
    </div>
  </div>
</template>

<script>
import Masonry from 'masonry-layout';

export default {
  name: 'WaterfallFlow',
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  mounted () {
    // 初始化瀑布流
    this.masonry = new Masonry('.waterfall-flow', {
      itemSelector: '.waterfall-flow-item',
      columnWidth: 200,
      gutter: 10,
      fitWidth: true
    });
    // 监听窗口大小变化
    window.addEventListener('resize', this.reload);
  },
  beforeDestroy () {
    // 销毁瀑布流
    this.masonry.destroy();
    // 移除窗口大小变化监听
    window.removeEventListener('resize', this.reload);
  },
  methods: {
    reload () {
      // 重新布局瀑布流
      this.masonry.reloadItems();
      this.masonry.layout();
    }
  }
}
</script>

<style scoped>
.waterfall-flow {
  width: 100%;
}

.waterfall-flow-item {
  width: 100%;
  margin-bottom: 10px;
}
</style>