.
├── query-node.js
├── waterfall-item.js
├── waterfall-item.json
├── waterfall-item.wxml
├── waterfall-item.wxss
├── waterfall.js
├── waterfall.json
├── waterfall.wxml
└── waterfall.wxss

// waterfall.js
Component({
    // ... other code
    relations: {
    './waterfall-item': {
      type: 'child',
    },
    // ... other code
  }
})
// waterfall-item.js
Component({
    // ... other code
    relations: {
    '././waterfall': {
      type: 'parent',
    },
    // ... other code
  }
})

<view class="waterfall custom-class">
  <view class="waterfall-inner">
    <slot ></slot>
  </view>
</view>

<view  class="waterfall-item custom-class"  style="{
     {position}}:0;top:{
     {(top >= 0 ? top + 'px' : 0 + 'rpx')}};">  <slot ></slot></view>不知道slot用法的童鞋，请参考微信小程序自定义组件模板和样式文档。

// query-node.js
/**
 * 获取当前页面中，选择器为 selector 的第一个node节点
 * @param {String} selector 符合微信小程序规范的选择器
 * @param {Object} context 调用环境，普通页面中为wx，自定义组件中为this；默认值为wx.
 * @return {Array} 返回一个数组，第一个元素为 node 节点
 */
export const querySelector = function (selector, context = wx) {
  return new Promise((resolve, reject) => {
    context.createSelectorQuery()
    .select(selector)
    .boundingClientRect((res) => {
      if (res) {
        resolve(res);
      } else {
        reject(`不存在选择器为 ${selector} 的节点`);
      }
    })
    .exec();
  })
};

<waterfall
      loading="{
     {loadMorePending}}"
      isAllLoaded="{
     {isAllLoaded}}"
    >
      <block wx:for="{
     {data.sections}}" wx:key="id" wx:for-item="product">
        <waterfall-item
          index="{
     {index}}"
          custom-class="flow-item-wrapper"
        >
          <view class="product-item">
            业务代码
          </view>
        </waterfall-item>
      </block>
    </waterfall>

// waterfall-item.js
import { querySelector } from './query-node';
Component({
  // ... other code
  lifetimes: {
    ready() {
      const [waterfall] = this.getRelationNodes('./waterfall');
      this.parent = waterfall;
      this.setWaterfallItemPosition();
    },
  }
  methods:{
    async setWaterfallItemPosition() {
      querySelector('.waterfall-item', this)
        .then(async (node) => {
          const { top, position } = await this.parent.getWaterfallItemPostionInfo(node);
          this.setData({
            top,
            position
          })
        })
    },
  }
  // ... other code
})

// waterfall.js
const POSITION_LEFT = 'left';
const POSITION_RIGHT = 'right';

Component({
  // ... other code
  /**
   * 组件的方法列表
   */
  methods: {
    lifetimes: {
      ready() {
        this.initParams();
      }
     },
    initParams() {
      this.leftHeights = 0;
      this.rightHeights = 0;
    },
    /**
     * 设置 waterfall-item 的高度值
     * @param {Object} node waterfall-item 组件位置尺寸数据
     */
    async getWaterfallItemPostionInfo(node) {
      let top = 0;
      let position = POSITION_LEFT;
      const { height } = node;
      const { itemGap } = this;
      if (this.leftHeights <= this.rightHeights) {
        top = this.leftHeights;
        if(this.leftHeights === 0) {
          this.leftHeights += height;
        } else {
          top += itemGap;
          this.leftHeights += (height + itemGap);
        }
      } else {
        position = POSITION_RIGHT;
        top = this.rightHeights;
        if(this.rightHeights === 0) {
          this.rightHeights += height;
        } else {
          top += itemGap;
          this.rightHeights += (height + itemGap);
        }
      }
      return {
        top,
        position,
      }
    }
    // ... other code
  }
})

<view
  class="waterfall-item custom-class"
  style="{
     {position}}:0;top:{
     {(top >= 0 ? top + 'px' : itemCount * 100 + 'vh')}};"
>
  <slot ></slot>
</view>
Component({
  // waterfall-item.js
  // ... other code
  lifetimes: {
    ready() {
      const { itemCount } = this.data;
      const [waterfall] = this.getRelationNodes('./waterfall');
      waterfall.childCount += 1;
      this.parent = waterfall;
      this.setData({
        itemCount: itemCount + waterfall.childCount,
      })
    },
  },
  // ... other code
})

itemGap = waterfall宽度 - （waterfall-item宽度 * 2）

// this.leftHeights += height + itemGap;
// or
// this.rightHeights += height + itemGap;