微信小程序实现瀑布流布局

小程序实现瀑布流

近期在做APP转成小程序的相关开发，需将APP里面的部分页面抽离出来，做成小程序。
其中有个页面是瀑布流(参差不齐的多栏布局)的形式。
Android客户端一般是通过RecyclerView的方式来进行实现，但在小程序中并没有类似的控件，所以我们只有通过自己的改编来进行实现。特此记录！

• 实现效果如图

一：需求分析

• 页面主要分成两列，每个条目的高度不固定，条目主要由封面图+标题+头像+发布者昵称组成

• 多列排列要求，第一条在左侧，第二条在右侧，后续的根据左右两栏的高度，依次放置在高度较低的一侧。

二：技术实现思路

• 1、将整个页面分成左右两栏，两侧各对应一个数据集。

• 2、定义变量，记录左右两侧的累计高度，然后依次将条目放置在高度较低的一侧。从而我们可以得到左右两侧的数据集，后续只需要进行页面的渲染就行了；

• 3、图片高度的确定，单个条目中图片宽度=(单列条目宽度/图片的原始宽度)*图片原始高度；

三：思路有了，接下来就是开始编写代码了

• 1、编写布局，将整个页面分成两栏xml代码如下

• wxml

<view class='content'>
<view class='left'>
  <block wx:for="{
  
  {leftList}}" wx:key="index">
    <image