react 瀑布流

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({ src: item.Cover }).then((res) => {
        item.CoverWidth = res.width + 'px'
        item.CoverHeight = res.height + 'px'
      })
    }
    console.log(list)

    this.isLeft()
  }

  async isLeft() {
    const { list, leftList, rightList } = this.state;
    for (const item of list) {
      leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item); //判断两边高度，来觉得添加到那边
      await this.getBoxHeight(leftList, rightList);
    }
  }

  getBoxHeight(leftList, rightList) { //获取左右两边高度

    let query = Taro.createSelectorQuery();
    return new Promise((resolve) => {
      this.setState({ leftList, rightList }, () => {
        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' >
          {leftList.map((item, index) => {
            return <View key={index}>
              <Image lazyLoad mode="widthFix" className='pic' src={item.Cover}></Image>
            </View>
          })}
        </View>
        <View className='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;
}