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()
      })
    }
  }

最后放上我所有的代码：

<template>
  <div class="waterfall-wrapper">
    <ul class="left-waterfall" ref="left">
      <li class="item" v-for="(item, index) in leftItems" v-bind:style=" {height:item.height+'px'}">{{ index }}</li>
    </ul>
    <ul class="right-waterfall" ref="right">
      <li class="item" v-for="(item, index) in rightItems" v-bind:style=" {height:item.height+'px'}">{{ index }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: [
        {
          height: 100
        },
        {
          height: 110
        },
        {
          height: 150
        },
        {
          height: 200
        },
        {
          height: 300
        },
        {
          height: 100
        },{
          height: 222
        },{
          height: 111
        },{
          height: 123
        },{
          height: 451
        },
      ],
      leftItems: [],
      rightItems: []
    }
  },
  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()
      console.log(leftHeight)
      console.log(rightHeight)
      if (item == null) {
        return
      }
      if (leftHeight <= rightHeight) {
        this.leftItems.push(item)
      }
      else {
        this.rightItems.push(item)
      }
      this.$nextTick(function () {
        this.updateWaterfall()
      })
    }
  }
}
</script>

<style scoped>

  ul {
    width: 40%
  }

  ul.left-waterfall {
    float: left;
  }

  ul.right-waterfall {
    float: right;
  }

  li.item {
    width: 100%;
    background-color: aqua;
    margin: 10px;
  }

</style>

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

---

写在最后

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