wadackel / react-stack-grid

Pinterest like layout components for React.js
https://wadackel.github.io/react-stack-grid/
MIT License
870 stars 77 forks source link

Images overlap taking the position of the preceding images #57

Closed amk5 closed 6 years ago

amk5 commented 6 years ago

When rendering images, it will take the position of the preceding images and create overlaps (will adjust automatically when resizing the browser).

The new image inherits the preceding image's translateX such as translateX(757px) translateY(434px), when resizing the browser it gets updated to translateX(0px) translateY(513px).

Here's what I mean: https://imgur.com/a/kPpHRzh

Here's my component:

export class Display extends React.Component {
    render () {
            return (
                <div>
                {
                    (this.props.returnImage(1) == null) ? (console.log('Nothing inside')) : (

                    <ImagesLoaded
                            elementType={'div'} 
                            className={'images'} 
                            onAlways={this.handleOnAlways}
                            onProgress={this.handleOnProgress}
                            onFail={this.handleOnFail}
                            done={this.handleDone}
                            background=".image" 
                    >       
                            <StackGrid columnWidth={'34.341231%'} monitorImagesLoaded={true}>
                            <div key="key1"><img src={this.props.returnImage(1)}/></div>
                            <div key="key2"><img src={this.props.returnImage(2)}/></div>
                            <div key="key3"><img src={this.props.returnImage(3)}/></div>
                            <div key="key4"><img src={this.props.returnImage(4)}/></div>
                            <div key="key5"><img src={this.props.returnImage(5)}/></div>
                            <div key="key6"><img src={this.props.returnImage(6)}/></div>
                            </StackGrid>
                    </ImagesLoaded>
                )
                }
                </div>
            )
        }
    }

Basically if this.props.returnImage(1) is not empty return the StackGrid component (I had to do this otherwise everything would overlap from the first try).

Please let me know if you know a turnaround!

amk5 commented 6 years ago

Solved this issue by changing key="key1" on each rendering.