как вызвать/перезагрузить плагин масонства при щелчке

Question

Поскольку у меня разные вкладки, кладка не загружает скрытые элементы, поэтому, когда я нажимаю на новую вкладку, изображения стекаются друг на друга, я знаю, что этот вопрос задан раньше и ответил с помощью триггерной кладки, щелкнув вкладку, но как бы я сделал это, не испортив первую вкладку.

В настоящее время вызова кладку с

$(function(){ 
$('#container').masonry({ 
// options 
itemSelector : '.item', 
columnWidth : 260 
    }); 
});` 
$(window).load(function(){ $('#container').masonry(); }); 

и то же самое для вкладки 2, но с другим ID - # container2

вкладка один работает отлично, но вкладка два стека образы, пока вы не измените размер браузера который фиксирует это и работает в нормальном режиме

Answer 1

Да, вы можете перезагрузить вид кладки на OnClick событие следующим образом: -

Использование $container.masonry('reload'); если это работа для вас. В моем случае это не работа. Я сделал с использованием setTimeout(function(){ $container.masonry() }, 400);. вызов кладки в setTimeout функция.

$(document).ready(function($) { 
    var $container = $('#youContainerId'); 
    $("#TabId").live("click",function(){ 
     //$container.masonry('reload'); 
     setTimeout(function(){ $container.masonry() }, 400); 
    }); 
}); 

Answer 2

Делают это так:

$(function(){ 
    $('#container').masonry({ 
     // options 
     itemSelector : '.item', 
     columnWidth : 260 
    }); 
}); 

var masonryUpdate = function() { 
    setTimeout(function() { 
     $('#container').masonry(); 
    }, 500); 
} 
$(document).on('click', masonryUpdate); 
$(document).ajaxComplete(masonryUpdate); 

снова Никогда не беспокоиться об этом! Или, вы можете вызвать его снова после того, как другие анимации, как:

$('#something').slideDown(600, masonryUpdate); 

Даже если вы этого не сделаете, просто нажмите в любом месте страницы и кладка будет обновляться.