微信小程序图片懒加载，图片高度自适应

<view class="container" v-cloak>
  <scroll-view style="width:{{windowWidth}}px;height:{{windowHeight}}px" scroll-y="true" bindscrolltolower="pullUpLoad">
    <view style="display:none">
      <image wx:for="{{list}}" wx:key="id" data-index="{{index}}" src="{{item.path}}" bindload="onImageLoad"></image>
    </view>
    <view class='list'>
      <view class='item'>
        <view class='list_content' wx:for="{{col1}}">
          <view class='list_path' bindtap='godetail' data-id="{{item.id}}">
            <image src="{{item.path}}" mode='widthFix' class='pathimg' binderror="binderrorimg" data-id="{{item.id}}" data-type="col1"></image>
          </view>
          <view class='list_text'>
            <text>{{item.title}}</text>
            <view class='list_info'>
              <view>
                <image src='{{item.head}}' class='head'  bindtap="personerrorimg" data-id="{{item.id}}" data-type="col1"></image>
                <text>{{item.smallname}}</text>
              </view>
              <view data-type="{{item.islike}}" data-index="{{index}}" data-id="{{item.id}}"  data-father="col1">
                <image src='{{imageurl}}heart.png' class='heart' wx:if="{{item.islike==true}}"></image>
                <image src='{{imageurl}}cancel.png' class='heart' wx:if="{{item.islike==false}}"></image>
                <text>{{item.likecount}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class='item'>
        <view class='list_content' wx:for="{{col2}}">
          <view class='list_path' bindtap='godetail' data-id="{{item.id}}">
            <image src="{{item.path}}" mode='widthFix' class='pathimg' binderror="binderrorimg" data-id="{{item.id}}" data-type="col2"></image>
   
          </view>
          <view class='list_text'>
            <text>{{item.title}}</text>
            <view class='list_info'>
              <view>
                <image src='{{item.head}}' class='head' bindtap="personerrorimg" data-id="{{item.id}}" data-type="col2"></image>
                <text>{{item.smallname}}</text>
              </view>
              <view data-type="{{item.islike}}" data-index="{{index}}" data-id="{{item.id}}"   data-father="col2">
                <image src='{{imageurl}}heart.png' class='heart' wx:if="{{item.islike==true}}"></image>
                <image src='{{imageurl}}cancel.png' class='heart' wx:if="{{item.islike==false}}"></image>
                <text>{{item.likecount}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</view

var config = require('../../../config.js')
//获取应用实例
var app = getApp()
Page({
  data: {
    imageurl: config.IMAGEURL,
    windowHeight: 0,
    windowWidth: 0,
    page: 1,
    hasMore: true,
    list: [],
    publish: false,
    imgWidth: 0,
    col1: [],
    col2: [],
    col1H: 0,
    col2H: 0,
    openid: config.OPENID,
    showlisturl:  "http://localhost/wxmall/getBeautyShow.json",
    addlikeurl:  "http://localhost/wxmall/addLikeShow.json",
    cancellikeurl: "http://localhost/wxmall/cancelLikeShow.json"
  },
  /*
   * 展示界面初始宽度和高度
  */
  onShow: function (e) {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth,
          imgWidth: (res.windowWidth - 16) * 0.49
        })
        console.log(res.windowWidth)
      }
    })
    this.setData({ publish: false })
  },
  /*
   * 上拉加载
  */
  pullUpLoad: function (e) {
    this.setData({
      page: this.data.page + 1
    })
    this.getDataFromServer(this.data.page)
  },
  getDataFromServer: function (page) {
    if (page == 1) {
      this.setData({ list: [], hasMore: true })
    }
    if (this.data.hasMore) {
      var start = config.PAGESIZE * (page - 1) + 1;
      var end = config.PAGESIZE * page;
      app.httpClient(this.data.showlisturl, { startindex: start, endindex: end, openid: this.data.openid }, (error, data) => {
        if (data.code == 200) {
          if (page == 1 & this.data.list.length > 0) {
            return;
          } else if (data.pagecount > this.data.list.length) {
            var listdata = this.data.list.concat(data.list);
            var hasMore = false;
            if (data.pagecount > listdata.length) {
              hasMore = true;
            }
            this.setData({ list: listdata, hasMore: hasMore })
          }


        } else {
          wx.showToast({
            title: data.codeinfo,
            image: '/image/msg.png',
            duration: 2000
          })
        }

      })
    }

  },
  onImageLoad: function (e) {
    var imageId = e.currentTarget.dataset.index;//当前图片下标
    var oImgW = e.detail.width;         //图片原始宽度
    var oImgH = e.detail.height;        //图片原始高度
    var imgWidth = this.data.imgWidth;  //图片设置的宽度
    var scale = imgWidth / oImgW;        //比例计算
    var imgHeight = oImgH * scale;      //自适应高度
    var images = this.data.list;
    var imageObj = "";
    for (var i = 0; i < images.length; i++) {
      var img = images[i];
      if (i === imageId) {
        imageObj = img;
        break;
      }
    }
    var col1 = this.data.col1;
    var col2 = this.data.col2;
    if (this.data.col1H <= this.data.col2H) {
      this.data.col1H += imgHeight;
      col1.push(imageObj);
    } else {
      this.data.col2H += imgHeight;
      col2.push(imageObj);
    }
    this.setData({ col1: col1 });
    this.setData({ col2: col2 })
  },//列表图片加载失败显示
  binderrorimg:function(e){
    var id = e.currentTarget.dataset.id;
    var imgtype = e.currentTarget.dataset.type;
    var col1 = this.data.col1;
    var col2 = this.data.col2;
    var that=this;
    var errimg={};
    if (imgtype == "col1") {
      for (var x = 0; x < col1.length; x++) {
        if (col1[x].id == id) {
          var imgObject = "col1[" + x + "].path";
          errimg[imgObject] = that.data.imageurl +"showerror.png";
          that.setData(errimg);
        }
      }
    } else if (imgtype == "col2") {
      for (var x = 0; x < col2.length; x++) {
        if (col2[x].id == id) {
          var imgObject = "col2[" + x + "].path";
          errimg[imgObject] = that.data.imageurl + "showerror.png";
          that.setData(errimg);
        }
      }
    }
  },//头像加载失败显示默认图
  personerrorimg:function(e){
    var id = e.currentTarget.dataset.id;
    var imgtype = e.currentTarget.dataset.type;
    var col1 = this.data.col1;
    var col2 = this.data.col2;
    var that = this;
    var errimg = {};
    if (imgtype == "col1") {
      for (var x = 0; x < col1.length; x++) {
        if (col1[x].id == id) {
          var imgObject = "col1[" + x + "].head";
          errimg[imgObject] = that.data.imageurl + "erreohead.png";
          that.setData(errimg);
        }
      }
    } else if (imgtype == "col2") {
      for (var x = 0; x < col2.length; x++) {
        if (col2[x].id == id) {
          var imgObject = "col2[" + x + "].head";
          errimg[imgObject] = that.data.imageurl + "erreohead.png";
          that.setData(errimg);
        }
      }
    }
  },
  onLoad: function () {
    var that = this;
    that.getDataFromServer(1);
  }
})

.container {
  font-size: 28rpx;
  position: relative;
}

.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0 8px;
  justify-content: space-between;
  box-sizing: border-box;
  padding-top: 20rpx;
}

.list .item {
  width: 49%;
}

.list_content {
  margin-bottom: 25rpx;
  background: #fff;
}

.list_content .pathimg {
  width: 100%;
}

.list_content .list_path {
  position: relative;
}

.list_content .icon {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  right: 25rpx;
  top: 25rpx;
}

.list_content .list_text {
  padding: 0 15rpx;
}

.list_content .list_info {
  display: flex;
  justify-content: space-between;
  padding: 15rpx 0;
}

.list_content .list_info view {
  display: flex;
  align-items: center;
}

.list_content .list_info text {
  margin-left: 10rpx;
}

.list_content .list_info .head {
  width: 60rpx;
  height:60rpx;
  border-radius:60rpx;
}

.list_content .list_info .heart {
  width: 40rpx;
  height: 35rpx;
}