vue+瀑布流

<div class="video-list">
      <ul ref="newArray1" class="zq-waterfall-left">
        <li @click="toVideo(item)"
            v-for="item in newArray1">
          <img class="video-img"
               :src="item.cover"
               alt="">
          <p>{{item.title}}</p>
          <div class="people"
               v-if="item.member">
            <img :src="item.member.avatar"
                 alt="">
            <span>{{item.member.nickname}}</span>
          </div>
          <img class="play"
               src="../../../assets/images/[email protected]"
               alt="">
        </li>

      </ul>
      <ul ref="newArray2" class="zq-waterfall-right">
        <li @click="toVideo(item)"
            v-for="item in newArray2">
          <img class="video-img"
               :src="item.cover"
               alt="">
          <p>{{item.title}}</p>
          <div class="people"
               v-if="item.member">
            <img :src="item.member.avatar"
                 alt="">
            <span>{{item.member.nickname}}</span>
          </div>
          <img class="play"
               src="../../../assets/images/[email protected]"
               alt="">
        </li>
      </ul>
      <div style="height: 3rem"></div>
    </div>

 css样式

.video-list {
    margin: 0.5rem 0.5rem 3.5rem 0.5rem;
    text-align: left;
    /*display: flex;*/
    ul {
      vertical-align:top;
      display: inline-block;
      /*display: flex;*/
      /*flex-direction: column;*/
      /*flex-wrap: wrap;*/
      width: 48%;
    }
    li {
      position: relative;
      display: flex;
      flex-direction: column;
      background-color: #ffffff;
      border-radius: 6px;
      margin-bottom: 0.5rem;
      overflow: hidden;
    }
    .play {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    ul:first-child {
      margin-right: 0.5rem;
    }
    p {
      font-size: 14px;
      color: #333333;
      font-weight: bold;
      padding: 5px 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .video-img {
      width: 100%;
      height: auto;
    }
    .people {
      display: flex;
      padding: 5px;
      img {
        flex: 0 0 1.5rem;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        margin: 0 5px;
      }
      span {
        flex: 1;
        line-height: 1.5rem;
        margin: 0 5px;
        font-size: 11px;
        color: #8c8c8c;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }

// 图片加载完回调
    getImg(url, callback) {
      let img = new Image();
      img.src = url;
      //如果图片被缓存，则直接返回缓存数据
      if (img.compltet) {
        /* callback(img.width, img.height); */
        callback(img.width, img.height, Number(img.height) / Number(img.width));
      } else {
        //完全加载完毕的事件
        img.onload = function() {
          /* callback(img.width, img.height); */
          callback(img.width, img.height, Number(img.height) / Number(img.width));
        };
      }
    },
    getData() {
      this.videoList = [];
      this.page = 1;
      this.isLoadMore = false;
      $http
        .get("plugin.video-share.frontend.video.getList", { page: this.page }, "load")
        .then(response => {
          if (response.result === 1) {
            this.total_page = response.data.list.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
            this.videoList = response.data.list.data;
            this.newArray1 = [];
            this.newArray2 = [];
            this.sort(0, this.videoList);
          } else {
            Toast(response.msg);
            this.page = this.page - 1;
            this.isLoadMore = false;
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    sort(arg, list) {
      let that = this;
      let index = arg || 0;
      if (list.length > index) {
        that.getImg(list[index].cover, function(w, h, r) {
          let boxA = document.getElementsByClassName("zq-waterfall-left")[0].clientHeight;
          let boxB = document.getElementsByClassName("zq-waterfall-right")[0].clientHeight;
          if (boxA <= boxB) {
            that.newArray1.push(list[index]);
            that.$nextTick(() => {
              that.sort(index + 1,list)  //加载完再递归
            })
          } else {
            that.newArray2.push(list[index]);
            that.$nextTick(() => {
              that.sort(index + 1,list)
            })
          }
        });
      }
      if(list.length-1 == index) {
        this.isLoadMore = true;
      }
    },

两列瀑布流  主要逻辑是先加载完每张图片，然后对比两列的高度，在判断push到哪一列（较短的一列），图片需要在dom元素渲染完再执行下一次递归，不然高度会判断不准确

https://www.jianshu.com/p/e5f2d8c16b57vue使用列表渲染 实现瀑布流布局