<block wx:for="{{imagesList}}">
<image src='{{item.pic}}' data-index='{{item.id}}' class='hide' bindload='reserveimg'></image>
</block>
<scroll-view style="height:{{scrollH}}rpx" class='scroll' bindscrolltolower="loadImages" scroll-y='true'>
<view class='col1'>
<block wx:for="{{col1}}">
<image src='{{item.pic}}' style='width:{{item.width}}rpx;height:{{item.height}}rpx;'></image>
</block>
</view>
<view class='col2'>
<block wx:for="{{col2}}">
<image src='{{item.pic}}' style='width:{{item.width}}rpx;height:{{item.height}}rpx;'></image>
</block>
</view>
</scroll-view>
.scroll{
width: 720rpx;
margin: 0 auto;
}
.col1{
width: 350rpx;
float: left;
}
.col2{
width: 350rpx;
float: left;
margin-left: 20rpx;
}
var col1H = 0;
var col2H = 0;
var col1 = [];
var col2 = [];
Page({
/**
* 页面的初始数据
*/
data: {
imagesList: [],
scrollH: 1500
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.loadImages();
},
//图片宽高重置
reserveimg: function (e) {
var that = this;
var index = e.currentTarget.dataset.index;
var imgw = e.detail.width;
var imgh = e.detail.height;
var width = 350;
var height = imgh * width / imgw;
for (var i = 0; i < that.data.imagesList.length; i++) {
if (i == index) {
if (col1H <= col2H) {
col1.push({
"pic": that.data.imagesList[i].pic,
"width": 350,
"height": height,
});
col1H += height;
} else {
col2.push({
"pic": that.data.imagesList[i].pic,
"width": 350,
"height": height,
})
col2H += height;
}
}
}
that.setData({
col1: col1,
col2: col2
})
console.info(index, col1, col2)
},
//下拉加载
loadImages: function () {
var that = this;
//模拟的加载本地图片数据
let images = [
{ pic: "http://img0.imgtn.bdimg.com/it/u=4139318954,1536360164&fm=26&gp=0.jpg", height: 0 },
{ pic: "http://img5.imgtn.bdimg.com/it/u=1007188585,453085648&fm=26&gp=0.jpg", height: 0 },
];
var imagesList = that.data.imagesList;
for (var i = 0; i < images.length; i++) {
images[i].id = i
}
var imagesArray = imagesList.concat(images)
this.setData({
imagesList: imagesArray
});
}
})