react waterfall

pull.tsx

import { View, Image, ScrollView } from '@tarojs/components'
import Taro, { Component } from '@tarojs/taro'

import './index.scss'

type Props = {
}

type State = {
  list: Object[],
  leftList: Object[],
  rightList: Object[],
  leftHeight: Number,
  rightHeight: Number
}

let leftHeight = 0
let rightHeight = 0

class Pull extends Component<Props, State> {
  constructor(props) {
    super(props)
    this.state = {
      list: [{ CoverWidth: '', CoverHeight: '', Cover: 'https://img0.tking.cn/mtl/default/img/Tj7a2JfPzH_.jpg' },
      { CoverWidth: '', CoverHeight: '', Cover: 'https://img0.tking.cn/mtl/default/img/WQXrEJGXfX_.jpg' },
      { CoverWidth: '', CoverHeight: '', Cover: 'https://img0.tking.cn/mtl/default/img/ZbZpfpmGCk_.jpg' },
      { CoverWidth: '', CoverHeight: '', Cover: 'https://img0.tking.cn/mtl/default/img/DmeGWxFBGD_.png' },
      { CoverWidth: '', CoverHeight: '', Cover: 'https://img0.tking.cn/mtl/default/img/F7s3cRhFj8_.jpg' },
      { CoverWidth: '', CoverHeight: '', Cover: 'https://img0.tking.cn/mtl/default/img/jPCEEkTAf4_.jpg' }],
      leftList: [],
      rightList: [],
    }
  }

  componentDidMount() {
    const { list } = this.state;

    for (const item of list) {
      Taro.getImageInfo (the src {:} item.Cover). The then ((RES) => { 
        item.CoverWidth = res.width + 'px'
        item.CoverHeight = res.height + 'px'
      }) 
    } 
    the console.log (List) 

    this.isLeft () 
  } 

  the async isLeft () { 
    const {List, leftList, rightList} = this.state; 
    for (const of Item List) { 
      leftHeight <= rightHeight leftList.push (Item):? rightList.push (Item); // height Analyzing sides to that there is added to 
      await this.getBoxHeight (leftList, rightList); 
    } 
  } 

  getBoxHeight (leftList, rightList) {// Get the height of the left and right sides of 

    the let Taro.createSelectorQuery = Query (); 
    return new new Promise ((Resolve) => { 
      this.setState ({leftList, rightList}, () = > { 
        the setTimeout (() => { 
          query.select ( '# left') boundingClientRect ();. 
          query.select ( ' . #right ') boundingClientRect ();
          query.exec((res) => {
            leftHeight = res[0].height;
            rightHeight = res[1].height;
            resolve();
          });
        }, 50);
      });
    })
  }

  render() {
    const { leftList, rightList } = this.state;

    return (
      <ScrollView
        enableFlex={true}
        className='content'>
        <View className='left' id="left" ref="left">
          {leftList.map((item, index) => {
            return <View key={index}>
              <Image lazyLoad mode="widthFix" className='pic' src={item.Cover}></Image>
            </View>
          })}
        </View>
        <View className='right' id="right">
          {rightList.map((item, index) => {
            return <View key={index}>
              <Image lazyLoad mode="widthFix" className='pic' src={item.Cover}></Image>
            </View>
          })}
        </View>
        <View className="clear"></View>
      </ScrollView>
    )
  }
}

export default Pull

pull.scss

.content{
  // flex-direction: column;
}

.left{
  width: 47%;
  float: left;
  margin:0 1% 0 2%;
}

.right{
  width: 47%;
  float: right;
  margin:0 2% 0 1%;
}

.pic{
  border-radius: 10rpx;
  width: 100%;
}
.clear{
  clear: both;
}