瀑布流的多种实现方式和优缺点

瀑布流相关
个人建议（供参考）用flex布局+JS计算两列高度来实现。基本思路是flex-box容器下有左右两列容器（对应组件state中的list1和list2数组），从list1开始创建子项，创建后计算左右两列容器的高度来比较，高度小的列对应的list数组就会push一个子项，这样循环到列表项全部创建完为止。（因为商品流的图片区域高度是固定的，影响列表子项容器高度的只有标签，所以不用考虑图片加载完成后才能得到的高度，即不用考虑Image组件的onLoad事件，因此实现起来还是简单的）

注意点：Taro3的setState是异步的，给数组赋值后，获取列的DOM高度要在setState完成后。

目前纯CSS实现的瀑布流布局从multi-columns、flex-box到grid都有一定的局限性。产品要求商品流的是按行的方式排列的，高度不均的变化影响的是子项的水平位置。multi-columns是按列来排列子项，纯CSS的flex-box的瀑布流实现基本也是用列排列子项的思路。现在的grid布局实现瀑布流要基本确定每一个子项的行空间大小。grid有瀑布流布局的草案，可以完美实现瀑布流，但是还没有成为规范。

flex布局+JS计算两列高度来实现瀑布流

import Taro from '@tarojs/taro'
import React, {
   
    Component } from 'react'
import {
   
    View, Text, Image, ScrollView } from '@tarojs/components'
import {
   
    gotoPresaleGoodDetails } from '@/utils/common/presale/index'
import {
   
    jumpSpotGoodsDetail } from '@/utils/common/linkUrl/index'
import {
   
    imgCdn, storeSign } from '@/utils/conf'
import {
   
    addCartApi } from '@/api/pages/cart/index'
import {
   
    tip } from '@/src/utils/util'
import './index.scss'

/**
 * @description             公共组件==> 商品列表(预售/NEW/HOT/特供)
 */
export default class GatherListComp extends Component {
   
   

  static defaultProps = {
   
   
    list: []
  }

  state = {
   
   
  }

  componentWillMount() {
   
    }
  componentDidMount() {
   
    }

  gotoGoodDetails(item) {
   
   
    // 预售or现货
    if (item.labelType == 1 || item.skuType == 2 || item.type == 2) {
   
   // 现货
      jumpSpotGoodsDetail(item.skuId)
    }
    else if (item.labelType == 2 || item.skuType == 1 || item.type == 1) {
   
   // 预售
      gotoPresaleGoodDetails(item.id || item.skuId)
    }
  }

  getIconFlag(item) {
   
   
    let flag = ''
    if (item.labelType == 2) {
   
   
      flag = 'icon-pre'
    }
    if (item.skuType == 1) {
   
   
      flag = 'icon-new'
    }
    if (item.skuType == 2) {
   
   
      flag = 'icon-hot'
    }
    if (item.skuType == 3) {
   
   
      flag = 'icon-tg'
    }
    return flag
  }

  // 加入购物车
  addShopCarNum(item) {
   
   
    Taro.showLoading({
   
    title: '添加中', mask: true })
    addCartApi({
   
    skuId: item.skuId, quantity: 1 }).then(res => {
   
   
      Taro.hideLoading()
      tip('成功加入购物车')
    }).catch(res => {
   
   
      Taro.hideLoading()
      let errorMsg = res && (res.message || res.error || '')
      tip(errorMsg || '加入购物车失败')
    })
  }

  goodsItemRender (item, index) {
   
   
    return (
      <View className='gather-list__item' key={
   
   index}&g