React 瀑布流佈局的實現 （移動端）

• React 瀑布流佈局的實現代碼 ,瞅下面！！！！

import React, { Component,Fragment } from 'react';
import {connect} from'react-redux'
import Axios from '[email protected]@axios';
class Waterfall extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            data:[],//整體的數據
            leftData:[],//左邊的數據
            rightData:[]//右邊的數據
         }
    }
    getHW(data){
        let heightDate = [0,0];//接收累計高度的容器數組
        let rightData =[]//渲染右側盒子的數組
        let leftData = []//渲染左側盒子的數組
        data.forEach(item => {
            let height = item.src.replace('http://dummyimage.com/','').substr(0,7).split('x')[1]*1;//對url地址進行一個截取，拿到高度
            let minNum = Math.min.apply(null,heightDate)// 從heighetData篩選最小項
            let minIndex = heightDate.indexOf(minNum);// 獲取 最小項的小標 準備開始進行累加
            heightDate[minIndex] = heightDate[minIndex] + height;//從 heightData 中找到最小的項後進行累加， 
            if(minIndex===0){//[0]加到left [1]加到 right
                leftData.push(item)
            }else{
                rightData.push(item)
            }
        })
        this.setState({ leftData,rightData  });//重新set state
    }
    render() { 
        let {leftData,rightData} = this.state;
        console.log(leftData,rightData)
        return ( 
            <Fragment>
                <div className='left'>
                    {
                        leftData && leftData.map((item,index)=>{
                            return <img src={item.src} alt={index} key={index}/>
                        })
                    }
                </div>
                <div className='right'>
                    {
                        rightData && rightData.map((item,index)=>{
                            return <img src={item.src} alt={index} key={index}/>
                        })
                    }
                </div>
            </Fragment>
         );
    }
    componentDidMount(){
        Axios.get('/api/data').then(res=>{
            this.props.dispatch({
                type:'SET_DATA',
                data:res.data.data
            })
            this.getHW(this.props.data) //調用
        })
    }
}
 
export default connect(
    (state)=>{
        return{
            data:state.data,
        }
    }
)(Waterfall);