瀑布流布局问题

Question

我采用了双列布局进行加载，判断左右两侧div的高度，哪边短则数据插哪边，在安卓和chrome上没什么问题，但在IOS上，会经常出现某一列特别长的情况，没有排查到问题点在哪里
采用的框架是VUE，部分代码如下
JS:

getImg(url, callback) {
      var 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)
          )
        }
      }
    },
    formateImgList(list) {
      // 加载完页面执行的函数
      let boxA = document.getElementsByClassName('c2c-market__main-left')[0]
        .clientHeight
      let boxB = document.getElementsByClassName('c2c-market__main-right')[0]
        .clientHeight
      let that = this
      for (let val of list) {
        this.getImg(val.goodsImage, function(w, h, r) {
          boxA = document.getElementsByClassName('c2c-market__main-left')[0]
            .clientHeight
          boxB = document.getElementsByClassName('c2c-market__main-right')[0]
            .clientHeight
          if (boxA > boxB) {
            that.goodsBlocksB.push(val)
          } else {
            that.goodsBlocksA.push(val)
          }
        })
      }
    },```
    
    HTML:
<div class="c2c-market__main clearfix">
    <div class="c2c-market__main-left">
      <GoodsBlock
        v-for="(v, i) in goodsBlocksA"
        :key="i"
        :name="v.goodsName"
        :img="v.goodsImage"
        :status="v.status"
        :price="v.nbdPrice"
        :type="v.type"
        :tag="v.tag"
        :goodsNumber="v.goodsNumber"
      />
    </div>
    <div class="c2c-market__main-right">
      <GoodsBlock
        v-for="(v, i) in goodsBlocksB"
        :key="i"
        :name="v.goodsName"
        :img="v.goodsImage"
        :status="v.status"
        :price="v.nbdPrice"
        :type="v.type"
        :tag="v.tag"
        :goodsNumber="v.goodsNumber"
      />
    </div>

Answer 1

我空间有完整的瀑布流案例，你可以参考下，现在基本都用瀑布流了，如果个人喜好，写个玩玩还可以，