砌体破坏并再次初始化

Question

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

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

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

为什么？

或者是否有任何其他解决方案来关闭砌体插件，然后在某些事件上打开它？

这是我的代码：

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

对于它的价值，我最终以不同的方式解决了这个问题。砌体只是设置一些风格。所以使用媒体查询，我设置以下CSS基本上渲染砌体无用：

@media (max-width: 768px) {
  .item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }
}

现在，我总是初始化砌体，并且永远不会初始化/重新初始化它。它始终存在，但使用!important的CSS媒体查询优先于Masonry设置的内联样式。

Answer 2

最后，经过几个小时的阅读文档，我发现砌体会为砌体元素制作一个$ .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();

Answer 3

Eli Gassert's answer可能比去所有的javascript更聪明。

但是，我发现自己这样做非常成功：

$(window).on('resize', function (event) {
  var $window = $(window);

  if ($window.width() < 768) {
    var $masonryTarget = $('.masonry-container'),
        $hasMasonry = $masonryTarget.data('masonry') ? true : false
    ;
    if ($masonryTarget.length > 0 && $hasMasonry) {
      // Destroy masonry if exists.
      $masonryTarget.masonry('destroy');
    }
  } else {
    // Enable all masonry instances.
    $('.mansonry-container').masonry({
      'itemSelector': '.masonry-item',
      'columnWidth': '.masonry-item'
    });
  }
});

基本思想是将作为jQuery插件初始化的砌体存储在数据属性中。如果定义了masonry数据属性，我们将销毁该实例。

可能值得一提的是that debouncing this function提高了很多性能。

Answer 4

$(document).ready(function() {

if ($(window).width() <= 767) {

    $('#container').masonry( 'destroy' );

} 

if ($(window).width() > 768) {

    $('#container').masonry({
      columnWidth: 350,
      gutter: 20,
    });

} 

if ($(window).width() > 992) {

    $('#container').masonry({
      columnWidth: 300,
      gutter: 20,
    });

} 


if ($(window).width() > 1200) {

    $('#container').masonry({
      columnWidth: 270,
      gutter: 20,
    });

}

});