passy
When it's loading the images, remove all items and add items will cause masonry not work
My code is something like this,
<div infinite-scroll='movie.nextPage()'
infinite-scroll-disabled='movie.busy' infinite-scroll-distance='1'
class="main_container" masonry preserve-order item-selector=".pin"
masonry-options="{ isFitWidth: true, transitionDuration: 0 }">
<div ng-repeat="movie in movies">
<av-movie movie="movie">
</div>
</div>
and main js code is like
movie.busy = true;
if (options && options.replace) {
$scope.movies.splice(0);
}
list(movie.type, movie.page).then(function(data){
$scope.movies = $scope.movies.concat(data);
movie.busy = false;
});
During it is loading the images, if I try to remove all images and add some images again, it will cause masonry not work. There is only one long vertical line of images.
But if I add preserve-order and it works fine.
I add preserve-order attribute into div tag and it works.
Default behavior is to show images which are loaded. It has better UX because the user will only see the complete images order by complete time. My solution will make the order as same order, in this case the user may see no image with shorter height and gradually become higher.
This helped me too. When I change the scope variable that contains urls with images I have huge gaps created in my masonry container. preserve-order made the situation much better (not perfect, but reasonable). Thanks @koshuang !
