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

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

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

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

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

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

思路：

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) => {