Masonry Plugin: изменение размера div не приведет к перестановкам

Question

Элементы Masonry обернуты в div шириной 1000px, у меня есть кнопка, чтобы изменить размер div до 2000x, используя jQuery addClass(), проблема в том, что Masonry не будет переставлять элементы, чтобы заполнить дополнительное пространство 1000px, я знаю, что изменение размера работает, потому изменение размера окна браузера приводит к перестановкам.

Кладка:

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

Кнопка:

$("a.button").toggle(function(){
    $(this).addClass("flip");
    $("div#container").fadeOut("fast", function() {
        $(this).fadeIn("fast").addClass("resize");
    });

CSS:

width: 1000px; /* default */
width: 2000px !important; /* on button press */

Я попытался запустить ('a'). Нажмите на функцию масонства, используя ту же кнопку, и она, кажется, работает нормально, но проблема все еще существует.

Любой совет? Я в тупике: /

Answer 1

Я полагаю, что вам нужно запустить функцию кладки, когда вы нажмете кнопку изменения размера.

$("a.button").toggle(function(){
    $(this).addClass("flip");
    $("div#container").fadeOut("fast", function() {
    $(this).fadeIn("fast").addClass("resize");
    // run masonry again
    $('#container').masonry({      
      itemSelector : '.item',
      columnWidth : 240
    });
});

Answer 2

С http://masonry.desandro.com/methods.html#reloaditems, вызов .masonry('reloadItems') захватит (возможно, новые) элементы, которые соответствуют itemSelector и переместит кирпичи, но вызов .masonry() просто переместит элементы, основываясь на самых последних измерениях его элементов .

Answer 3

Попробуйте вызвать событие изменения размера с помощью jquery:

$(window).trigger('resize');

Это сработало для меня!