我们可以在Page中通过数据绑定，来传递要加载的图片信息到wxml中，让组件去加载图片资源，然后当图片加载完成的时候，通过bindload指定的事件处理函数来做进一步处理。

我们来看一下Page文件中定义的onImageLoad函数。在其中，我们可以从传入的事件对象e上，获取到组件的丰富信息，包括通过它加载进来的图片的实际大小。然后我们将图片按照页面上实际需要显示的尺寸，计算出同比例缩放后的尺寸。接着，我们可以根据左右两列目前累积的内容高度，来决定把当前加载进来的图片放到哪一边。

let col1H = 0;

let col2H = 0;

Page({

data: {

scrollH: 0,

imgWidth: 0,

loadingCount: 0,

images: [],

col1: [],

col2: []

},

onLoad: function () {

wx.getSystemInfo({

success: (res) => {

let ww = res.windowWidth;

let wh = res.windowHeight;

let imgWidth = ww * 0.48;

let scrollH = wh;

this.setData({

scrollH: scrollH,

imgWidth: imgWidth

});

//加载首组图片

this.loadImages();

}

})

},

onImageLoad: function (e) {

let imageId = e.currentTarget.id;

let oImgW = e.detail.width; //图片原始宽度

let oImgH = e.detail.height; //图片原始高度

let imgWidth = this.data.imgWidth; //图片设置的宽度

let scale = imgWidth / oImgW; //比例计算

let imgHeight = oImgH * scale; //自适应高度

let images = this.data.images;

let imageObj = null;

for (let i = 0; i < images.length; i++) {

let img = images[i];

if (img.id === imageId) {

imageObj = img;

break;

}

}

imageObj.height = imgHeight;

let loadingCount = this.data.loadingCount - 1;

let col1 = this.data.col1;

let col2 = this.data.col2;

//判断当前图片添加到左列还是右列

if (col1H <= col2H) {

col1H += imgHeight;

col1.push(imageObj);

} else {

col2H += imgHeight;

col2.push(imageObj);

}

let data = {

loadingCount: loadingCount,

col1: col1,

col2: col2

};

//当前这组图片已加载完毕，则清空图片临时加载区域的内容

if (!loadingCount) {

data.images = [];

}

this.setData(data);

},

loadImages: function () {

let images = [