search

rexxars / react-layout-pack

React component for "packing" elements together in a pinterest-like layout
http://rexxars.github.io/react-layout-pack/
MIT License
89 stars 12 forks source link

For the first time load or infinite scroll load all images are overlapped - top position calculation is wrong #5

Open manimuthukumar6 opened 8 years ago

manimuthukumar6 commented 8 years ago

Hi ,

For the first time load or infinite scroll load all the images are overlapped with the first image itself.

I think the issue is I am not setting image height in DOM style attribute. I am not sure about the height of the image. Width is fixed but height is dynamic. So the problem is a calculation of top position. If images are not loaded during the calculation time top position is calculated wrongly.

If you have any fix for that one it will be helpful.

I am waiting for your update.

Thanks, Mani

image

rexxars commented 8 years ago

Yes, this is a known shortcoming. As outlined in the readme:

Child elements that changes size after render won't work as expected. The component needs access to the height of each element to properly align elements. Images without a defined size will for instance break.

So currently you need to work around this. Preloading the images with an onload handler, then adding the completed images as children is one option. Finding a way to figure out the height in advance is better.

sbehrends commented 8 years ago

Maybe this fixes the issue: https://github.com/rexxars/react-layout-pack/pull/6 I added an event to reorder everything once image is loadad.

manimuthukumar6 commented 7 years ago

Hi,

Can you merge this change into master branch?

Thanks, Mani

manimuthukumar6 commented 7 years ago

Hi,

I guess this issue still not yet fixed. I am loading the first page from server side rendering (prerender) and I am able to reproduce. Is there any callback method call whenever it's required to call the reposition?

Thanks, Mani