Waterfall flow layout problem

I use a two-column layout to load to determine the height of the div on the left and right sides, and which side is short, which side is inserted into which side. There is no problem on Android and chrome, but on IOS, there is often a particularly long column, and there is no troubleshooting where the problem is.
the framework adopted is the VUE, part of the code as follows
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>
Jul.30,2021

I have a complete case of waterfall flow in my space. You can refer to it. Now you basically use waterfall flow. If you like it, you can write it for fun.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b30509-2bceb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b30509-2bceb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?