瀑布流实现(一)无限加载版

首先上成品图片

     

wxml页面

<!-- 加载图片 -->
<view style="display:none">
  <image wx:for="{{goodsList}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" binderror="goodsError" bindload="goodsListLoad"></image>
</view>

<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages" class='cotain'>
  <!-- 左布局 -->
  <view class='img_item-l'>
    <view class='img_item-l-v' wx:for='{{col1}}' wx:key="{{index}}" bindtap='goStoreD' data-id='{{item.good_id}}' data-store='{{item.store_id}}' data-type='{{item.goods_type}}'>
      <image src='{{item.pic}}' mode='widthFix' lazy-load></image>
    </view>
  </view>
  <!-- 右布局 -->
  <view class='img_item-r'>
    <view class='img_item-r-v' wx:for='{{col2}}' wx:key="{{index}}" bindtap='goStoreD' data-id='{{item.good_id}}' data-store='{{item.store_id}}' data-type='{{item.goods_type}}'>
      <image src='{{item.pic}}' mode='widthFix' lazy-load></image>
    </view>
  </view>
</scroll-view>

json布局

/* 瀑布流布局 stat */

.cotain {
  width: 750rpx;
  box-sizing: border-box;
  padding: 0rpx 20rpx 0 20rpx;
}

.img_item-l {
  width: 345rpx;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}

.img_item-l-v {
  margin-left: 5rpx;
  width: 340rpx;
  margin-top: 20rpx;
  box-shadow: 0rpx 0 10rpx 0rpx #aaa;
  border-radius: 10rpx;
  overflow: hidden;
  position: relative;
}

.img_item-l-v image {
  width: 100%;
  vertical-align: top;
}

.img_item-r {
  margin-left: 20rpx;
  width: 345rpx;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}

.img_item-r-v {
  margin-left: 5rpx;
  width: 340rpx;
  margin-top: 20rpx;
  box-shadow: 0rpx 0 10rpx 0rpx #aaa;
  border-radius: 10rpx;
  overflow: hidden;
  position: relative;
}

.img_item-r-v image {
  width: 100%;
  vertical-align: top;
}

/* 瀑布流布局 end */

js界面

let col1H = 0;
let col2H = 0;
Page({

  data: {
    scrollH: 0, //可用屏幕高度
    imgWidth: 340, //图片宽度
    goodsList: [], //请求到的商品
    loadingCount: 0,
    col1: [],
    col2: [],
  },

  onLoad: function() {
    var that = this

    wx.getSystemInfo({
      success: (res) => {
        that.setData({
          scrollH: res.windowHeight,
          scrollW: res.windowWidth
        });
      }
    })

    that.loadImages()

  },

  loadImages: function() {
    var that = this

    console.log('我是加载图片')
    let tempGoodsList = [{
        pic: "../../images/1.jpg",
        height: 0,
        id: "img-" + (+new Date()) + '-' + 1
      },
      {
        pic: "../../images/2.jpg",
        height: 0,
        id: "img-" + (+new Date()) + '-' + 2
      },
      {
        pic: "../../images/3.jpg",
        height: 0,
        id: "img-" + (+new Date()) + '-' + 3
      },
      {
        pic: "../../images/4.jpg",
        height: 0,
        id: "img-" + (+new Date()) + '-' + 4
      },
      {
        pic: "../../images/5.jpg",
        height: 0,
        id: "img-" + (+new Date()) + '-' + 5
      },
      {
        pic: "../../images/6.jpg",
        height: 0,
        id: "img-" + (+new Date()) + '-' + 6
      },
      {
        pic: "../../images/7.jpg",
        height: 0,
        id: "img-" + (+new Date()) + '-' + 7
      }, {
        pic: "../../images/8.jpg",
        height: 0,
        id: "img-" + (+new Date()) + '-' + 8
      },
      {
        pic: "../../images/9.jpg",
        height: 0,
        id: "img-" + (+new Date()) + '-' + 9
      },
      {
        pic: "../../images/10.jpg",
        height: 0,
        id: "img-" + (+new Date()) + '-' + 10
      },
      {
        pic: "../../images/11.jpg",
        height: 0,
        id: "img-" + (+new Date()) + '-' + 11
      }
    ];

    that.setData({
      loadingCount: tempGoodsList.length,
      goodsList: tempGoodsList
    })
  },

  //图片加载完成
  goodsListLoad: function(e) {
    var that = this

    let imageId = e.currentTarget.id;
    let oImgW = e.detail.width; //图片原始宽度
    let oImgH = e.detail.height; //图片原始高度
    let imgWidth = that.data.imgWidth; //图片设置的宽度
    let scale = imgWidth / oImgW; //比例计算
    //console.log('scale', scale)
    let imgHeight = oImgH * scale; //自适应高度

    var tempGoodsList = that.data.goodsList
    let imageObj = null;

    for (let i = 0; i < tempGoodsList.length; i++) {
      let tempGoods = tempGoodsList[i];
      if (tempGoods.id === imageId) {
        imageObj = tempGoods;
        break;
      }
    }

    imageObj.height = imgHeight;
    console.log('加载完成0', imageObj)

    let loadingCount = that.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);
    }

    that.setData({
      loadingCount: loadingCount,
      col1: col1,
      col2: col2
    })

    if (!loadingCount) {
      that.setData({
        goodsList: []
      })
      console.log(that.data.goodsList)
    }

  },

  //图片加载失败
  goodsError: function(e) {
    var that = this

    var tempGoodsList = that.data.goodsList
    let loadingCount = that.data.loadingCount - 1;
    that.setData({
      loadingCount: loadingCount
    })

    if (!loadingCount) {
      that.setData({
        goodsList: []
      })
      console.log(that.data.goodsList)
    }

    console.log('图片加载失败')
    console.log(e)
  },

})