因为时常需要用到瀑布流布局，但是在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 ()
写在最后
最近开始都特别忙，而且上一两周的时间也出现了厌恶工作的情绪，好在及时调整过来，对于代码和生活都不是任务而是应该认真尊重和对待的两件事。还是希望这往后的一年自己能对得起自己，不辜负大部分人吧。
