Make Masonry reactive in Meteor

help
1

I’m using Isotope for my project to display images. However when my collection is updated Isotope does not pick this up to redraw the grid, instead it just overlays the new image on top of the existing one.

Can Isotope be made reactive to know up the collection has been updated and place the new image into the existing grid correctly.

This is my code for isotope:

        Template.Home.onRendered(function () {
        Meteor.setTimeout(function(){
            var $container = $('.iso');
            $container.imagesLoaded(function () {
                $container.isotope({
                    masonry: {
                        gutter: 1,
                        itemSelector: '.card',
                        columnWidth:1
                    },
                    filter: '*'
                });
            });
        }, 100);
    });
1 Like
2

+1 I’ve really struggled with Masonry + Meteor in the past.

Meteor 1.3 + React + https://github.com/eiriklv/react-masonry-component

seems to work pretty magically though, even when you update the collection!

3

Thanks for the link and the demo example looks great, but I’m using blaze templates with my meteor app so this React-masonry-component might not be suitable for me.

4

Yeah what I’m saying is I wasn’t able to get Masonry working with Blaze at all. Like you said, it would mess up whenever I altered the collection. Switched to React and it just magically worked, hahaha.

5

Cool…I’m thinking of switching to React after I have completed the first build of the app. So I suppose I can give it a go then. Thanks