Masonry destroy and initialize again

Question

I have initialize masonry plugin - works OK,

than I destroy it for media width <= 767px - it was destroyed

but when I return back to media width > 767px and initialize masonry again it doesn't work.

why?

or is there any another solution to turn off masonry plugin and later turn it on on some event?

this is my code:

var masonryData = {
    isInitLayout: true,
    isResizeBound: false,
    itemSelector: '.item',
    columnWidth: 300,
    gutter: 20,
    transitionDuration: '0.5s'
};

function initializeMasonry(masonryData){
    if (jQuery().masonry) {
        var masonryContainer = jQuery('.masonry').masonry(masonryData);
        jQuery(masonryContainer).imagesLoaded(function(){
            jQuery(masonryContainer).masonry(masonryData);
        });
    }
}

function destroyMasonry(){
    if (jQuery().masonry) {
        jQuery('.masonry').masonry();
        jQuery('.masonry').masonry('destroy');
    }
}

I'm using enquire plugin so I use match/unmatch methods for js media queries:

$.Site.Match.smallScreen = function() {
   ...
   destroyMasonry();
   ...
}

$.Site.Match.mediumScreen = function() {
   ...
   initializeMasonry(masonryData);
   ...
}

Many thanks for help

Answer 1

Finally after hours of reading the docs, I found that masonry will make a $.data('masonry') to masonry element.

You can read more about it in masonry docs here.

This data will affect the items position in masonry. So, we need to remove this data with $.removeData('masonry') after we destroy the masonry.

// init masonry
$('.masonry-container').masonry();

// destroy masonry
$('.masonry-container').masonry('destroy');
$('.masonry-container').removeData('masonry'); // This line to remove masonry's data

// re-init masonry again. The position will be nice
$('.masonry-container').masonry();