search

dantrain / react-stonecutter

Animated grid layout component for React
http://dantrain.github.io/react-stonecutter
MIT License
1.21k stars 72 forks source link

Can't scroll page #5

Closed izkrivera closed 8 years ago

izkrivera commented 8 years ago

Page in question at:

http://merrillaudio.isaacrivera.com/#/news

It can't be scrolled. I assume it is re-rendering. Any insights?

izkrivera commented 8 years ago

Solved the issue, though it was complicated. If the items to be laid out contains images the size of which is unknown, the grid will layout with overlaps once the images are loaded in. I did not see in the documentation any way of addressing this. Adding onload events to the images creates an infinite loop between the render method and the onload, which keeps firing everytime the grid re-renders. So I had to add a onload event to the images conditionally. Having in mind the number of items and keeping a count. So that the second time around I dont add the onload. There should be a built-in way to deal with item resizing...

dantrain commented 8 years ago

Hi there,

It seems most of the open issues are to do with loading images of unknown size, so I will treat this as a feature request and try to work this into the measureItems higher-order component for the next release. #2 #4

Glad you found a way around it in the meantime!

izkrivera commented 8 years ago

Thanks for replying Dan.

If the items laid out are animating or changing in size due to an image load, that should not prompt a re-render. The component could provide a way to re-layout without re-rendering or perhaps optionally rerendering: Grid.layout.update(false); or some such method, perhaps?

dantrain commented 8 years ago

I've updated the measureItems higher-order component with some new options, I wonder if you could give it a try? Something like:

const Grid = measureItems(SpringGrid, { measureImages: true })