微信小程序 瀑布流布局 图片按原比例显示 宽高比 等比显示图片

如下：是今天要实现的样式：

思考：微信开发文档上有没有现成的标签等可以直接实现的呢？搜索一下，貌似没有，想太多。

官方没有，人间的大神一定有留下足迹。

搜索各站大神帖子，文章，总是有那么一丝丝的不足。

整合各大神的思路，开始自己的小鬼编程。

思路：

1、将页面分成两栏，一个float：left；一个float：right；ok；两栏已分好。

2、开始填数据，左右两栏共用一个数据数组，采用下标取模的方式，取数据 ：left数据显示下标取模等于0的数据 即 {{index%2==0}}，right同理。

3、图片的等比显示：

因为小程序给定的宽是750rpx;  我这留两边和中间的缝隙后给宽335rpx； 高是宽除于宽高比(  height:{{335/item.widthBiHeight}}rpx  )，在css中给定图片高的最大值和最小值。

这里等比显示的时候花费时间比较长，本来是获取图片之后，通过图片路径获取图片的宽高，得到图片的宽高比，直接使用。

wx.getImageInfo({

         src: 图片路径,

         complete: (res) => {

          console.log(res)//  读取宽高，得到宽高比。但是我是一个数组，里面有很多元素，这个方法时异步请求，返回的数据，没有顺序，也想着获取的时候给个图片的标识，读数据的时候，能知道这个数据时对应的哪张图片，但是没有找到相关的给定数据的字段。所以我就放弃了，直接用户上传图片的时候获取宽高比，存数据库中，啥时候用的时候直接使用，虽然绕路千百里，但是到达目的地。

大神们也帮着指导一下，咋样异步请求返回的数据可以和原图片对应上呢？小鬼弄不了了。说你呢？知道就留言给小鬼，小鬼晚上会进你的梦里感谢你的。*—*

        }

代码如下：

html：

    
    
    
        
        
        
            {{item.goodsName}}{{index}}-{{index%2}}
            ￥{{item.sellerPrice}}
            {{item.communityName}}
        
        
    
    

    
        
            
            
                {{item.goodsName}}{{index}}-{{index%2}}
                ￥{{item.sellerPrice}}
                {{item.communityName}}
            
        
    
    

css：

/***    商品列表  start    ***/
.recommend_box{
  width: 700rpx;
  margin: 0 auto;
}
.recommend_title{
  width: 680rpx;
  height: 40rpx;
  font-size: 40rpx;
  border-left: 5rpx solid #f38c8d;
  padding-left: 15rpx;
  margin: 20rpx 0;
  line-height: 40rpx;

}
.recommend_item_left{

  float: left;
  width: 335rpx;
  border-radius: 20rpx;
  box-shadow: 0,0,2rpx,#aaa;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;

}
.recommend_item_right{
  float: right;
  width: 335rpx;
  border-radius: 20rpx;
  box-shadow: 0,0,2rpx,#aaa;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;

}
/*
*  给定图片的最大高度和最小高度。
*/
.recommend_item image{
  width: 335rpx;
  border-radius: 20rpx 20rpx 0 0;
  min-height: 200rpx;
  max-height: 600rpx;

}
.remomend_item_word{
  width: 650rpx;
  padding: 0 25rpx;

}
.recommned_item_name{
  font-size: 26rpx;
  line-height: 40rpx;

}
.recommned_item_price{
  color: #ff221e;
  font-size: 40rpx;
}
.recommned_item_community_name{
  color: #aaa;
  font-size: 24rpx;

}
/***    商品列表  end    ***/

js：数据数组样式：

goodsList:[
      {
        id:1,
        goodsName:"商品名称商品名称",
        sellerPrice:123.36,
        communityName:"万城聚豪",
        widthBiHeight:1,
        iconImg:"goods1.jpg"
      },
      {
        id:2,
        goodsName:"商品名称222商品名称",
        sellerPrice:123.36,
        communityName:"万城聚2豪",
        widthBiHeight:1,
        iconImg:"goods2.jpg"
      },
      {
        id:3,
        goodsName:"商品名称333商品名称",
        sellerPrice:123.36,
        communityName:"万城聚豪333",
        widthBiHeight:1,
        iconImg:"goods3.jpg"
      },
      {
        id:4,
        goodsName:"商品名称商品44名称",
        sellerPrice:123.36,
        communityName:"万城聚44豪",
        widthBiHeight:0.75,
        iconImg:"goods4.jpg"
      },
      {
        id:5,
        goodsName:"商品名称商55品名称",
        sellerPrice:123.36,
        communityName:"万城聚55豪",
        widthBiHeight:2.93,
        iconImg:"goods5.jpg"
      },
      {
        id:6,
        goodsName:"商品名称商66品名称",
        sellerPrice:123.36,
        communityName:"万城聚豪66",
        widthBiHeight:1,
        iconImg:"goods6.jpg"
      },
    ],