media-queries - Masonry销毁并再次初始化

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

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

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

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

非常感谢您的帮助

Answer 1

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

您可以在砖石文档中阅读更多相关信息 here .

此数据将影响项目在砌体中的位置。因此，我们需要在销毁砌体后使用 $.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();