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>