Item overlapping

[azhard4int]

Hi,

From the demo, it seems the masonry overlaps the items where the images are lazy loaded. http://prntscr.com/etgmp9

What would be the best way to resolve this?

1. Using SetInterval and call the plugin?
2. Calling upon the lazy load images callback?

If we implement over the lazy load images, it eventually slows down the whole page when the items are over 200-500? Same thing for the setInterval case as well.

[afram]

The demo on the home page is at least 2 years old and from v1.0.1

Have you experienced these issues in your code or only in the demo?

[inje]

I have the same issue working with v5.0.3. The gallery I'm creating is supposed to look like this:

But ends up looking like this:

I was able to solve it by grabbing the ref of the Masonry component, then performing a ref.masonry.layout() after everything was done rendering. This works, but feels slightly hacky since it's going into the guts of the <Masonry> component. If there is a better solution to fixing the image overlap, I'd love to know.

[afram]

could you please put up a code sample on https://www.webpackbin.com/ @byeo630

[inje]

Sure, here's an example with the structure of how I solved the problem. The webpackbin example is very simple with few moving parts. Because of this,this.performLayout doesn't get invoked in the render method since there isn't an event that triggers the rerender. In my project implementation however, it rerenders the gallery when new props are passed down, and when the gallery state changes.

https://www.webpackbin.com/bins/-KhUBJz8gWu9EaQiASTh

[kitze]

hey @byeo630 i'm curious, why is your example not stretching to the far right? Is this a bug with the library or with your example?

[inje]

@kitze The example wasn't centered because I didn't add any centering, not anything wrong with the library at all. I didn't think centering that important so I just made each image 30% width so there was extra space on the right side. I just fixed it up now though, so it should be centered.

[jabacchetta]

I'm running into this issue as well when combining with react-lazyload.

[jhk115]

I had the same issue but setting updateOnEachImageLoad to true fixed the problem.

[laurenbarker]

Had the same issue when combining with react-lazyload -- got it to work properly by using a custom placeholder that has the same styling as the masonry child elements minus the image. Didn't need to set updateOnEachImageLoad to true.

[kaypsingh]

disabling react lazy load fixed the problem for me.

[nghiavu255]

enableResizableChildren={true} and running