2

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

比我销毁它的媒体宽度 <= 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);
   ...
}

非常感谢您的帮助

4

4 回答 4

6

最后在阅读文档数小时后，我发现 masonry 会生成一个 $.data('masonry') 到 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();
于 2018-03-02T11:12:54.900 回答
3

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

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

现在，我总是初始化砌体，从不取消初始化/重新初始化它。它一直处于开启状态，但 CSS 媒体查询!important优先于 Masonry 设置的内联样式。

于 2014-08-01T17:45:12.553 回答
1

Eli Gassert 的回答可能比使用所有 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 插件的砌体存储在数据属性中。如果定义了砌体数据属性，我们将销毁该实例。

可能值得一提的是，去抖动这个函数可以大大提高性能。

于 2016-11-29T14:33:23.863 回答
-1 
$(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,
    });

}

});

于 2013-09-20T11:09:25.763 回答