react-waterfall-h5
v1.0.7
Published
react移动端轻量级瀑布流布局
Downloads
6
Readme
##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>
)
}
}
##注意
- 子组件中img的className必须包含 larry_waterfall_img。
- 父组件传给子组件的值,统一被 this.props.dataSource 接收。
##有问题反馈 在使用中有任何问题,欢迎反馈给我,可以用以下联系方式跟我交流
- 邮件:[email protected]
- QQ: 918035829