小程序商品瀑布流效果

由于wx.getImageInfo会校验域名，所以这里用来image里bindload事件来获取宽高。

<image wx:for="{{products}}" data-product="{{item}}" style="display:none;" wx:key="*this" bindload="imgLoad" mode="widthFix" src="{{item.product_img}}"></image>
<view class="content">
  <view class="left">
    <view wx:for="{{lList}}" wx:key="*this" class="product-item">
        <view class="product-img">
          <image mode="widthFix" src="{{item.product_img}}"></image>
        </view>
        <view class="product-title">
          {{item.product_name}}
        </view>
        <view class="product-price">
          {{item.product_price}}
        </view>
    </view>
  </view>
  <view class="right">
    <view wx:for="{{rList}}" wx:key="*this" class="product-item">
        <view class="product-img">
          <image mode="widthFix" src="{{item.product_img}}"></image>
        </view>
        <view class="product-title">
          {{item.product_name}}
        </view>
        <view class="product-price">
          {{item.product_price}}
        </view>
    </view>
  </view>
</view>

Page({
  data: {
    products: [
      {
        "product_id": "0001",
        "product_img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3990884305,1603403423&fm=26&gp=0.jpg",
        "product_name": "九阳（Joyoung）京品家电 电火锅家用多功能电热锅 麦饭石色不粘锅 6L大容量电煮锅HG60-G91 【邓伦推荐】",
        "product_price": "￥119.00",
      },
      {
        "product_id": "0002",
        "product_img": "//img10.360buyimg.com/mobilecms/s316x316_jfs/t1/87215/34/14762/336752/5e688e45E971e3945/6f142005d5043ba1.jpg!q70.dpg.webp",
        "product_name": "  利仁 （Liven）5.5L多功能家用电火锅不粘电炒锅电煮锅 电炖锅多用途锅电煎锅电热锅电煮锅DHG-558  ",
        "product_price": "￥299.00",
      },
      {
        "product_id": "0003",
        "product_img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603878213440&di=e26910a4561bd8d1437001cb7408bd89&imgtype=0&src=http%3A%2F%2Fzkres1.myzaker.com%2F201812%2F5c1eb41e77ac640aea0dc83c_640.jpg",
        "product_name": "  米家 小米加湿器卧室家用办公室桌面 迷你静音空气加湿 银离子材料 上加水 4L大容量  ",
        "product_price": "￥99.00",
      },
      {
        "product_id": "0004",
        "product_img": "//img14.360buyimg.com/mobilecms/s316x316_jfs/t1/134749/19/13067/167435/5f8f93d7E1fd11f49/a3678d67fa3f9b25.png.webp",
        "product_name": "   美的（Midea）折叠电蒸锅多功能家用海鲜蒸箱电蒸笼料理机蒸汽笼大小容量多层台式家用ZG2626P171  ",
        "product_price": "￥779.00",
      },
      {
        "product_id": "1004",
        "product_img": "//img10.360buyimg.com/mobilecms/s316x316_jfs/t1/127322/16/14905/161839/5f847b3bE954511a0/81e009495bb2492e.jpg!q70.dpg.webp",
        "product_name": "  美菱（MeiLing） 饮水机立式家用茶吧机智能速热开水机 【美菱秒杀狂欢】高端轻奢遥控款，限量秒杀低至3折  ",
        "product_price": "￥248.00",
      },
      {
        "product_id": "1005",
        "product_img": "//img12.360buyimg.com/mobilecms/s316x316_jfs/t1/148916/10/4530/145991/5f2a7e1bE37159999/432c127dd9bf6f11.jpg!q70.dpg.webp",
        "product_name": "  容声电热水瓶304不锈钢开水瓶七段恒温热水壶家用电水壶5L大容量开水壶办公室烧水壶保温一体烧水器 白色款  ",
        "product_price": "￥149.00",
      },
      {
        "product_id": "1006",
        "product_img": "//img14.360buyimg.com/mobilecms/s316x316_jfs/t1/142064/27/11570/205985/5f8f9d55E841612c4/fef15d19caa47bce.jpg!q70.dpg.webp",
        "product_name": "摩飞电器（Morphyrichards）MR9088网红多功能锅多用途料理锅电烧烤锅煎锅电火锅烧烤炉家用电蒸锅薄荷绿  ",
        "product_price": "￥149.00",
      },
      {
        "product_id": "1007",
        "product_img": "//img14.360buyimg.com/mobilecms/s316x316_jfs/t1/133081/13/12895/64295/5f8ee509E43d12a9c/e59569bbf7e28d25.jpg!q70.dpg.webp",
        "product_name": "  苏泊尔 （SUPOR ）除螨仪手持床铺除螨机家用吸尘器 双拍打紫外线杀菌 VCM16A（复古绿）  ",
        "product_price": "￥189.00",
      }

    ],
    lHeight:0,
    rHeight:0,
    lList:[],
    rList:[]
  },

  onLoad: function (options) {
    
  },
  imgLoad:function(e){
    var lList = this.data.lList;
    var rList = this.data.rList;
    var lHeight = this.data.lHeight;
    var rHeight = this.data.rHeight;
    if (lHeight == rHeight || rHeight > lHeight){
      lList.push(e.currentTarget.dataset.product);
      lHeight += e.detail.height / e.detail.width;
      this.setData({
        lList,
        lHeight
      })
    }else{
      rList.push(e.currentTarget.dataset.product);
      rHeight += e.detail.height / e.detail.width;
      this.setData({
        rList,
        rHeight
      })
    }
  }
})

page{
  background-color: #d1d0d0;
}
.content{
  display: flex;
  margin: 20rpx;
}
.left{
  width:49%;
  margin-right: 2%;
}
.right{
  width: 49%;
}
.item image{
  width: 100%;
}
.product-item{
  border-radius: 10rpx;
  background-color: #fff;
  overflow: hidden;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
}
.product-item image{
  width: 100%;
}
.product-item .product-title{
  font-size: 28rpx;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 15rpx;
}
.product-item .product-price{
  color: #f20c59;
  font-weight: 700;
  font-size: 32rpx;
  padding: 0 20rpx;
}