页面使用瀑布流

<template>
  <div class="page-view" ref="content" :style="{'height': parentHeight + 'px'}">
      <div class="data-item" v-for="(item,index) in dataList" :key="index" ref="tableItem" :style="{'width': tableWidth + 'px'}">
          <p class="item-name">{{item[0].modular}}</p>
          <table>
            <thead>
              <tr>
                <td class="bg">页面</td>
                <td class="bg">访问次数</td>
                <td class="bg" v-if="item[0].modular !== '下载'">平均每次停留时间</td>
              </tr>
              <tr v-for="(itemChild,index1) in item" :key="index1">
                <td>{{itemChild.onlyPageName}}</td>
                <td>{{itemChild.visitCount}}</td>
                <td v-if="item[0].modular !== '下载'">{{secondToTimeStr(itemChild.avgBrowseTime)}}s</td>
              </tr>
            </thead>
          </table>
      </div>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  props: ['ratioModulars'],
  data: () => ({
    dataList: [],
    pageWidth: 0,
    gap: 15,
    parentHeight: 0,
    tableWidth: 0
  }),
  components: {
  },
  computed: {
  },
  created () {
    // console.log(this.ratioModulars['下载'],'123456')
    for (var key in this.ratioModulars) {
      if (key !== '无用') {
        this.dataList.push(this.ratioModulars[key])
      }
    }
    console.log(this.dataList)
    this.dataList.sort((a, b) => {
      return b.length - a.length
    })
    this.dataList.forEach(e => {
      if (e[0].modular === '下载') {
        e.sort((a, b) => {
          return a.visitCount - b.visitCount
        })
      } else {
        e.sort((a, b) => {
          return a.avgBrowseTime - b.avgBrowseTime
        })
      }
    })
  },
  watch: {
  },
  mounted () {
    this.pageWidth = this.$refs.content.clientWidth
    this.tableWidth = (this.pageWidth - this.gap) / 2
    this.$nextTick(() => {
      this.waterFull(this.$refs.tableItem)
    })
    window.onresize = () => {
      return (() => {
        this.pageWidth = this.$refs.content.clientWidth
        this.tableWidth = (this.pageWidth - this.gap) / 2
        this.waterFull(this.$refs.tableItem)
        console.log('111')
      })()
    }
  },
  methods: {
    secondToTimeStr (t) {
      let a = 0
      let i = 0
      let e = 0
      if (!t) return
      if (t < 60) return '00:' + ((i = t) < 10 ? '0' + i : i)
      if (t < 3600) return '' + ((a = parseInt(t / 60)) < 10 ? '0' + a : a) + ':' + ((i = t % 60) < 10 ? '0' + i : i)
      if (t >= 3600) {
        // var a, i, e = parseInt(t / 3600)
        a = parseInt(t / 3600)
        i = parseInt(t / 3600)
        e = parseInt(t / 3600)
        return (e < 10 ? '0' + e : e) + ':' + ((a = parseInt(t % 3600 / 60)) < 10 ? '0' + a : a) + ':' + ((i = t % 60) < 10 ? '0' + i : i)
      }
    },
    waterFull (items) { // 瀑布流,items为传入的dom
      console.log(items)
      let columns = 2 // 1确定列数
      let itemWidth = (this.pageWidth - this.gap) / 2 // 2列每列的宽度 this.gap为间距我定义的10 this.sizeWidth()为获取宽度高度
      var arr = [] // 数据
      for (var i = 0; i < items.length; i++) {
        console.log(items[i].offsetHeight)
        if (i < columns) {
          // 3确定第一行
          console.log(items[i].clientHeight, '665')
          items[i].style.top = 0
          items[i].style.left = (itemWidth + this.gap) * i + 'px'
          // console.log(items[i].style.height)
          console.log(items[i].offsetHeight)
          arr.push(items[i].offsetHeight)
        } else { // 其他行
          // 4找到数组中最小高度  和 它的索引
          var minHeight = arr[0]
          var index = 0
          for (var j = 0; j < arr.length; j++) {
            if (minHeight > arr[j]) {
              minHeight = arr[j]
              index = j
            }
          }
          // 5设置下一行的第一个盒子位置
          // top值就是最小列的高度 + gap
          items[i].style.top = arr[index] + this.gap + 'px'
          // left值就是最小列距离左边的距离
          items[i].style.left = items[index].offsetLeft + 'px'
          // 6修改最小列的高度
          // 最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
          arr[index] = arr[index] + items[i].offsetHeight + this.gap
        }
      }
      let lefts = []
      let rights = []
      items.forEach(e => {
        if (e.style.left === '0px') {
          lefts.push(e)
        } else {
          rights.push(e)
        }
      })
      let sum1 = 0
      let sum2 = 0
      for (let i = 0; i < lefts.length; i++) {
        sum1 += lefts[i].offsetHeight
      }
      for (let i = 0; i < rights.length; i++) {
        sum2 += rights[i].offsetHeight
      }
      if (sum1 > sum2) {
        this.parentHeight = sum1 + 100
      } else {
        this.parentHeight = sum2 + 100
      }
    }
  }

}
</script>

<style lang="less" scoped>
.page-view {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  padding-bottom: 80px;
  position: relative;
  // overflow: hidden;
}
.data-item {
  // width: 49.5%;
  background-color: #fff;
  padding:  15px 35px;
  position: absolute;
}
.item-name {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
}
table {
  width: 100%;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
.bg {
  background: rgb(249, 249, 250);;
}
tr th,tr td {
  border: 1px solid #ccc;
  text-align: center;
  padding: 10px 0px;
}
</style>