砌体销毁并再次初始化

Question

我已经初始化砌体插件 - 工作正常，

比我销毁它的媒体宽度 <= 767px - 它被销毁了

但是当我回到媒体宽度 > 767px 并再次初始化砌体时，它不起作用。

为什么？

或者是否有其他解决方案可以关闭 masonry 插件，然后在某些事件中打开它？

这是我的代码：

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');
    }
}

我正在使用查询插件，所以我对 js 媒体查询使用匹配/不匹配方法：

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

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

非常感谢您的帮助

Answer 1

最后，在阅读文档数小时后，我发现 masonry 会将 $.data('masonry') 变成 masonry 元素。

您可以在此处的砌体文档中阅读有关它的更多信息。

此数据将影响砌体中的物品位置。因此，我们需要在破坏砖石后使用 $.removeData('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();