react-waterfall-h5

react-waterfall-h5是什么?

一款基于React的移动端瀑布流组件。

react-waterfall-h5使用？

引入：

import Waterfall from 'react-waterfall-h5';

参数:

data //类型是数组，该值是需要循环的数据 
columns // 类型是数字，该值指定瀑布流为几列

示例:

 
class Parent extends React.Component{
    
    render(){
      
      const data = [{
          src:a.jpg,
          name:'a'
      },{
          src:b.jpg,
          name:'b'
      },{
          src:c.jpg,
          name:'c'
      }]
 
    return(
      <Waterfall data={data} columns={2}>
        <Child/>
      </Waterfall>
    )
 
  }
  
}
 
class Child extends React.Component{
    
    render(){
 
        const { dataSource } = this.props;  // {src:x.jpg, name:'x'}
 
        return(
          <div>
            <img src={ dataSource.src } className='larry_waterfall_img'/>
            <div>{ dataSource.name }</div>
          </div>
        )
 
  }
  
}

注意

1. 子组件中img的className必须包含 larry_waterfall_img。
2. 父组件传给子组件的值，统一被 this.props.dataSource 接收。

有问题反馈

在使用中有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流

• 邮件:[e-mail]
• QQ: 918035829