Images switch positions on loadMore with InfiniteScroll

[sickrandir]

Hi, I'm trying to user angulargrid for a grid of images with infinite scroll. It seems to be straightforward but I get a strange problem where during loadMore, the images in the grid get shuffled and change positions. Sometimes it's just two images switching, sometimes more. I really can't come up with a solution for this problem and I don't really understand the cause either. Here is an exemple: [https://dhpro.duckdns.org/discover] It's fairly easy to see the problem by scrolling down and triggering InfinitScroll. Usually happens on the second loadMore. The problem is more clear by testing on Google Chrome.

[s-yadav]

Can you share your code where you are constructing your model.

[s-yadav]

Ok so it looks like you have disabled refresh-on-img-load, and not mentioned fixed height to your list elements or images, so while image is loading, your list items does not have proper height which changes once images are loaded. This causes mis-alignment of grid items.

1. Give height to your items, if it depends on width, you can use proportionality trick http://www.ignitersworld.com/blogs/css-tricks-maintaining-proportionality-in-a-element/
2. I am not sure if you actually need angulargrid. As you have similiar dimension grid items, You can align them just by float:left. Is there any specific reason you used angulargrid ?

[sickrandir]

Hi, thank you for answering. I'm only reading now. The example I showed you has mostly same size images but I 'd like to support different sizes and that's why I'm trying angulargrid. I have disabled refresh-on-img-load because it seems to somewhat limit the rearrangement behaviour. I tried to use the data-actual-height parameter of the grid but it seems to work only if I set it globally with the grid. I tried to define it in a dynamic (per image) way like this: data-actual-height="{{ Math.floor(gridWidth / prod.image_ratio) )}}", where gridWidth is fixed as column width and the height of the image depends on the model (prod) loaded. Unfortunately this doesn't work as on first load all the elements get stacked on top of each other before the images are loaded. Do you have any suggestion? Thanks a lot