JS实现瀑布流布局

JS实现瀑布流布局

最近在做项目时，要实现瀑布流布局，搜索到很多瀑布流组件，如vue-masonry等等。但是很多组件把滚动分页加载都封装在组件里面，但是我的项目有自己的滚动组件只想送入数据进行展示，这时很多组件的布局就乱掉了。没办法只能最后自己yong用js实现了。

下面具体说说实现思路吧。

实现思路

本次实现的是2列的瀑布流布局，大致思路是将所有的元素设置为absolue的定位，初始让所有子元素的top、left都为0，然后循环计算所有元素的高度，设置leftheight和rightheight去保存左右两列的高度，并为每个子元素设置top。leftheight <= rightheight 时，{ top: leftheight, left: 0px},leftheight > rightheight时，{ top: rightheight, right: 0px}。最后计算并设置父元素总高度。

实现代码

<div  class="layout-content" :style="{height: contentHeight}">
    <div class="card-item">

    </div>
</div>
.card-item {
    width: 50%;
    position: absolute;
    top: 0px;
    // left: 0px;
  }
  
.layout-content {
    width: 100%;
    position: relative;
  }

waterfallComputed () {
       // 获取子元素Dom
      let domlist = document.getElementsByClassName('card-item')
      let top = 0
      let leftheight = 0
      let rightheight = 0
      for (var i =0; i<domlist.length;i++) {
        // 获取子元素高度
        let height = 0
        if (this.list[i].style) {
          height = Number(this.list[i].style.height.replace("px", ""))
        } else {
          height = domlist[i].getBoundingClientRect().height
        }
        // 计算每个子元素的定位置
        if (leftheight <= rightheight) {
          this.list[i].style = {
            top: leftheight+ 'px',
            left: '0px',
            height: height + 'px'
          }
          leftheight = leftheight + height
        } else {
          this.list[i].style = {
            top: rightheight + 'px',
            right: '0px',
            height: height + 'px'
          }
          rightheight = rightheight + height
        }
      }
      // 计算并设置父元素总高度
      let clientHeight = document.body.clientHeight - 90
      let height = Math.max(leftheight, rightheight)
      height = Math.max(height, clientHeight)
      this.contentHeight = height + 'px'
    }

实现效果

如果大家有更好的方法或者组件，欢迎留言交流~