vue 实现简单的瀑布流

效果图： 

 

 代码：

"kmHomeDom"组件是我商品的组件

<template>
  <div class="km-ProductList">
    <!-- 商品列表 -->
    <div class="commodity_list">
      <div v-if="likeDatas.length > 0" class="km_dom_box">
        <!-- 左边 -->
        <div style="float:left;" class="domLI" ref="leftDom">
          <div v-for="(item, index) in likeDatas" :key="index" class="km_dom">
            <km-HomeDom :commodityDatas="item" @sendAdd="SendItem"></km-HomeDom>
          </div>
        </div>
        <!-- 右边 -->
        <div style="float:right" class="domLI" ref="rightDom">
          <div v-for="(item, index) in likeDatas2" :key="index" class="km_dom km_dom_spacing">
            <km-HomeDom :commodityDatas="item" @sendAdd="SendItem"></km-HomeDom>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import kmHomeDom from '@/components/km-homeDom.vue'
export default {
  components: {
    kmHomeDom
  },
  props: {
    dataList: {
      type: Array
    }
  },
  data () {
    return {
      likeDatas: [], // 左边list
      likeDatas2: [] // 右边list
    }
  },
  created () {
    this.likeDatas.push(this.dataList[0])
    this.likeDatas2.push(this.dataList[1])
  },
  mounted () {
    this.dataList.forEach((item, index) => {
      // index 从第三条开始插入
      if (index > 1) {
        // 通过$nextTick和setTimeout延时，保证每一条加载完再插入下一条
        this.$nextTick(() => {
          setTimeout(() => {
            this.initData(item, index)
          }, 100)
        })
      }
    })
  },
  methods: {
    initData (item, index) {
      let leftHeight = this.$refs.leftDom.offsetHeight
      let rightHeight = this.$refs.rightDom.offsetHeight
      let likeDatas = []
      let likeDatas2 = []
      if (leftHeight > rightHeight) { // 左大于右 入右
        likeDatas2.push(item)
      } else if (leftHeight < rightHeight) { // 左小于右 入左
        likeDatas.push(item)
      } else if (leftHeight === rightHeight) { // 左右相等
        if (index % 2 === 0) { // 按0开始的顺序 %2 入左右
          likeDatas.push(item)
        } else {
          likeDatas2.push(item)
        }
      }
      this.likeDatas = [...this.likeDatas, ...likeDatas]
      this.likeDatas2 = [...this.likeDatas2, ...likeDatas2]
    }
  }
}
</script>

<style scoped>
.km-ProductList{
  overflow: hidden;
  background: #F3F6F7;
}
.commodity_list{
   overflow: hidden;
   margin-top: 0.14rem;
   padding: 0 0.24rem;
}
.km_dom{
   width: 100%;
   margin-bottom: 0.16rem;
 }
.domLI{
   width: 48.5%;
   overflow: hidden;
 }

.bottom_Box{
   height: 2rem;
   width: 100%;
   position: relative;
 }
.bottom_Box_title{
   width: 100%;
   position: absolute;
   bottom: 0.54rem;
   text-align: center;
   font-size: 0.22rem;
   color: rgba(153, 153, 153, 1);
}
</style>