MixItUp and Masonry are not working together

Question

I'm trying to use Masonry (http://masonry.desandro.com/) and Mixitup (http://mixitup.io/) together but they are not working correctly as it only shows one image at a time and the whole layout gets broken.

I've been doing a lot of searching but I couldn't find much on this issue. It says in MixItUp website that certain css rules will create problems, could the css rules from Masonry be causing this? or I'm doing something wrong?

Also, I'm aware of Isotope which can achieve the same thing, but I need this for a commercial project and I can't afford to buy the license for it.

Please let me know regarding this. I would appreciate any help. Thanks.

Answer 1

You can use mixItUp callback function. Please check below example.

// mixItUp function
$('#grid').mixItUp({
        activeClass: 'on',
        callbacks: { 
            onMixEnd: function(state){
                masonryGrid(); // ******* here call masonry function
            }
        }
    });

function masonryGrid(){
    var $container = $('#container');
    // initialize
    $container.masonry({
        itemSelector: '.item',
        columnWidth: '.item', //as you wish , you can use numeric 
        isAnimated: true,
    });
    $container.masonry('reloadItems');
    $container.masonry('layout');
}

Answer 2

I had trouble initializing it with the above callback script due to my responsive layout, finally got it working with:

var mixer = mixitup(containerEl, {
  multifilter: {
    enable: true,
  },
  animation: {
    effects: "fade translateZ(-100px)",
  },
  callbacks: {
   onMixEnd: masonryGrid,
  },
}); 
 //init masonry grid 
jQuery(window).on("load", function() {
  console.log('masonry load');
    var $container = jQuery('#container');
    $container.masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer', //as you wish , you can use numeric 
        isAnimated: true,
        horizontalOrder: true,
        percentPosition: true
    });
    $container.masonry('reloadItems');
    $container.masonry('layout');
});
function masonryGrid(){
    console.log('masonry function');
    var $container = jQuery('#container');
    $container.masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer', //as you wish , you can use numeric 
        isAnimated: true,
        percentPosition: true,
        horizontalOrder: true
    });
    $container.masonry('reloadItems');
    $container.masonry('layout');
}

Also used an empty element .grid-sizer in the layout as the first item to calculate the layout:

<div id="container" class="demo-columns masonry-grid">
  <div class="grid-sizer"></div>
    <!-- rest of the layout items after this -->

And Css:

#container {
  width:100%;
  height:100%;
}
.grid-sizer {
  width:25%;
}

Hope this helps anyone closer to solution as well.