Кладка уничтожить и инициализировать снова

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

Я использую плагин спросить, поэтому я использую соответствия/unmatch методы Js запросов СМИ:

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

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

Большое спасибо за помощь

Answer 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, 
    }); 

} 

});

Answer 2

Для чего это стоит, я решил это по-другому. Масонство просто устанавливает некоторые стили. Таким образом, используя медиа-запрос, я установил следующий CSS в основном делают кладку бесполезное:

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

Теперь я всегда инициализировать кладку, и никогда не Uninitialize/реинициализировать. Это все время, но медиа-запросы CSS с !important имеют приоритет над встроенными стилями, установленными масонством.

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 хранится в атрибуте данных. Если атрибут данных кладки определен, мы уничтожаем экземпляр.

Стоит отметить, что that debouncing this function улучшает производительность.

Answer 4

Наконец, после того, как я прочитал документы, я обнаружил, что кладка сделает кладку $ .data («кладка») на элемент кладки.

Подробнее об этом можно найти в документах для кладки here.

Эти данные влияют на положение позиций в кладке. Таким образом, мы должны удалить эти данные с помощью $ .removeData («масонство») после уничтожения кладки.

// 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();