Vue 瀑布流布局的简单实现

因为时常需要用到瀑布流布局，但是在github上找到的vue-waterfall组件需要自己定义内容的长宽（大概是这个意思？我没有看懂那个的用法），而且和自己的项目的内容布局有些差异于是就自己写一个基于vue的瀑布流布局。在此记录一下思考过程和实现方法。

---

基本思想

如下图实现的布局：

瀑布流布局

其实很容易就想到了ul，我们想要几列布局就写几个ul就好了。
但是我们怎么去往ul里面填充内容呢？因为我自己认为vuejs的思想就是通过操作数据来实现布局的变化，那么只需要知道哪些数据放在左边，哪些在右边就可以了。

---

代码实现

根据上述思想定义一些数据如下：

data () {
    return {
      data: [],   // 在created的时候获取所有要展示的数据
      leftItems: [], // 存放左边ul里面要展示的数据
      rightItems: [] // 存放右边ul里面要展示的数据
    }
}

首先我们将所有要展示的数据都存放在data数组里面，然后就是不停的吧data数组里面的数据一个一个的取出放在leftItems或者rightItems里面就可以渲染出页面了。这里要解决的问题是 怎么选择左边还是右边？我想到了之前记录的那篇 Vue的生命周期和nextTick ()文章中解决了显示数据的问题，那么只要递归地比较左边ul和右边ul的可视高度，然后再把内容放在高度小的一边即可，思路清晰之后，代码的实现就变得简单直观起来：

mounted () {
    // TODO GET DISPLAY_DATA
    this.updateWaterfall()
  },
  methods: {
    updateWaterfall () {
      const leftHeight = this.$refs.left.clientHeight
      const rightHeight = this.$refs.right.clientHeight
      let item = this.data.shift()
      if (item == null) {
        return
      }
      if (leftHeight <= rightHeight) {
        this.leftItems.push(item)
      }
      else {
        this.rightItems.push(item)
      }
      this.$nextTick(function () {
        this.updateWaterfall()
      })
    }
  }

最后放上我所有的代码：

关于以上代码中的nextTick的使用和作用还烦请移步我的另一篇文章：Vue的生命周期和nextTick ()

---

写在最后

最近开始都特别忙，而且上一两周的时间也出现了厌恶工作的情绪，好在及时调整过来，对于代码和生活都不是任务而是应该认真尊重和对待的两件事。还是希望这往后的一年自己能对得起自己，不辜负大部分人吧。