在VUE中实现瀑布流布局组件（附加完整演示项目）

瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。
下面是一个瀑布流布局的实现过程。

项目结构

我这里两列垂直布局

<template>
   <div class="fall-pic">
    <ul class="col left" ref="col1">
        <li class="item-pro" v-for="(item,keys) in dataList1" :key="keys">
          <img :src="item.picUrl" v-lazy="item.picUrl"/>
        </li>
    </ul>
    <ul class="col right" ref="col2">
        <li class="item-pro" v-for="(item,keys) in dataList2" :key="keys">
            <img :src="item.picUrl"  v-lazy="item.picUrl"/>
        </li>
    </ul>
  </div>
</template>

逻辑代码

首先定义好保存数据的数组

 data() {
      return {
        mainMenuList: [],//保存所有图片
        //保存渲染到页面上的图片
        dataList1: [],
        dataList2: [],
      }
    },

接着就是最重要的逻辑步骤了

    created(){
      this.initData();
    },
    methods: {
      async initData(){
        const {data: result} = await Http.get(api.DATA_LIST);
        console.log(result);
        const picUrlList = result.picList;
        console.log(picUrlList)
        
        this.mainMenuList = picUrlList;
        this.mountMenu();
      },
      mountMenu(arg) {
        var temp = this.mainMenuList
        var index = arg || 0
        var refName = this.selectCol()
        console.log(refName)
        if (temp.length > index) {
            this[refName].push(this.mainMenuList[index])
            this.$nextTick(() => {
              this.mountMenu(index + 1)
          })
        }
      },
      selectCol() {
        var getHeight = (ref) => {
          return this.$refs[ref].offsetHeight;
        }
        var height1 = getHeight('col1')
        var height2 = getHeight('col2')
        switch (Math.min(height1, height2)) {
          case height1:
          return 'dataList1'
          break
          case height2:
          return 'dataList2'
          break
        }
      },
    }

对于部分初学者来说这里的/$nextTick（）可能会优点难理解，这个函数实在vue生命周期的updated之后执行的，在这里我们为了拿到dom元素，提前执行，用法可以去vue官网的nextTick()查看。

整体代码如下

为了便于分析，我都有些注释。

<template>
   <div class="fall-pic">
    <ul class="col left" ref="col1">
        <li class="item-pro" v-for="(item,keys) in dataList1" :key="keys">
          <img :src="item.picUrl" v-lazy="item.picUrl"/>
        </li>
    </ul>
    <ul class="col right" ref="col2">
        <li class="item-pro" v-for="(item,keys) in dataList2" :key="keys">
            <img :src="item.picUrl"  v-lazy="item.picUrl"/>
        </li>
    </ul>
  </div>
</template>

<script>
import api from '../utils/api'
import Http from '../utils/Http'
export default {
    data() {
      return {
        mainMenuList: [],//保存所有图片
        //保存渲染到页面上的图片
        dataList1: [],
        dataList2: [],
      }
    },
    mounted() {
   
    },
    created(){
      this.initData();
    },
    methods: {
      async initData(){
         // 发送请求
        const {data: result} = await Http.get(api.DATA_LIST);
        console.log(result);
        const picUrlList = result.picList;
        console.log(picUrlList)
        
        this.mainMenuList = picUrlList;
        this.mountMenu();
      },
      mountMenu(arg) {
        var temp = this.mainMenuList
        var index = arg || 0
        // 判断ul高度（返回来一个高度最小的ul）
        var refName = this.selectCol()
        console.log(refName)
        if (temp.length > index) {
            // 每次比较高度之后从mainMenuList数组中取出一张图片放到高度最小的ul中
            this[refName].push(this.mainMenuList[index])
            //当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
            // 你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功
            this.$nextTick(() => {
              this.mountMenu(index + 1)
              // console.log(refName)
          })
        }
      },
      selectCol() {
        var getHeight = (ref) => {
          // $refs获取dom节点
          return this.$refs[ref].offsetHeight;
        }
        var height1 = getHeight('col1')
        var height2 = getHeight('col2')
        // 判断高度
        switch (Math.min(height1, height2)) {
          case height1:
          return 'dataList1'
          break
          case height2:
          return 'dataList2'
          break
        }
      },
    }
}
</script>

<style lang='scss' scoped>
// 布局样式
  .fall-pic{
    background: #f5f5f5;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .col{
      width: 50%;
      &.left{
        float: left;
      }
      &.right{
        float:right;
      }
      
      .item-pro{
        padding: 2px 4px;
            img{
            display: block;
            width: 100%;
          }
        
      }
    }
  }
</style>

运行效果图：

整体项目请到我的github下载，安装依赖即可查看效果。