Can your lib work with items, that have dynamic height ?

[Ivan]

Hi
I have a bunch of divs and I want to show them using waterfall layout.
Divs doesn't have fixed height, is it possible ?

[Ivan]

Right now I'm getting
Uncaught TypeError: Cannot read property 'width' of undefined
on

var childHeight = parseInt(child.props.style.height, 10) + _this.props.itemMargin;

[Chubu]

i have the same problem.

is there any solution to this ?

[dingquantracy]

Same problem，i have to give it up

[Changge]

@dingquantracy

can you provide the sample to explain the problem?

eh when i use the example's code
`import React from 'react'
import ReactDOM from 'react-dom'
import AutoResponsive from 'autoresponsive-react'
import axios from 'axios';
import './index.less'
class PhotoWaterFall extends React.Component {
constructor(props) {
super(props)
this.state = {
data: [],
containerWidth: ''
}
}
componentWillMount() {
window.addEventListener('resize', () => {
this.setState({
containerWidth: ReactDOM.findDOMNode(this.refs.container).clientWidth
});
}, false);
this.getData();
}
getData = () => {
axios.get('/photolist').then(res => {
console.log(res.data.data)
this.setState({
data: res.data.data
}, error => {

        })
    })
}
getAutoResponsiveProps=()=>{
    return {
        itemMargin: 10,
        containerWidth: this.state.containerWidth || document.body.clientWidth,
        itemClassName: 'item',
        gridWidth: 100,
        transitionDuration: '.5'
    };
}
render() {
    return (
        <div className="photo-water-fall">
            <AutoResponsive ref="container" {...this.getAutoResponsiveProps()}>
                {
                    this.state.data.map((i, index) => {
                        let style = {
                            width: i.w === 'w1' ? 190 : 390,
                            height: i.w === 'w1' ? 240 : 490
                        };
                        return (
                            <div>
                                <a key={index} href="/photolist" className={`${i.w} album item`} style={style}>
                                    <img alt="" className="a-cont j_ACont" src="./images/a.jpg" />
                                    <img alt="" className="a-cover" src={i.src} />
                                    <p className="a-mask">{index}<i></i></p>
                                    <p className="a-layer">
                                        <span className="al-brand">{i.brand}</span>
                                        <span className="al-title">{i.title}</span>
                                        <span className="al-count">{i.count}件商品</span>
                                    </p>
                                    <p className="a-more j_ALMore"></p>
                                </a>
                            </div>
                        );
                    })
                }
            </AutoResponsive>
        </div>
    )
}

}
export default PhotoWaterFall`
like this

[zegapain]

Right now I'm getting
Uncaught TypeError: Cannot read property 'width' of undefined
on

var childHeight = parseInt(child.props.style.height, 10) + _this.props.itemMargin;

let me see, must set the width in the style, like this