Duvar Eklentisi: Yeniden boyutlandırmak için yeniden boyutlandırma

Question

1000px geniş div ile sarılmış duvar öğeleri var, jQuery's addClass() kullanarak div 2000x yeniden boyutlandırmak için bir düğme var, sorun, Masonry fazladan 1000px alanı doldurmak için öğeleri yeniden eşleştirmez Yeniden boyutlandırmanın çalıştığını biliyorum çünkü tarayıcı penceresini yeniden boyutlandırmak bir değişiklik yapılmasına neden oluyor.

Duvar:

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

Düğme:

$("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 */ 

I ('a') çalıştıran çalıştı cl Aynı düğmeyi kullanarak Yığın işlevi üzerinde çalışıyorum ve normal çalışıyor gibi görünüyor ama sorun hala var.

Herhangi bir öneri? Stumped:/

Answer 1

Yeniden boyut düğmesine tıklandığında duvarcılık fonksiyonunu çalıştırmanız gerektiğine inanıyorum. itemSelector maç ve tuğla yeniden konumlandırmak (muhtemelen yeni) öğeleri çekecek .masonry('reloadItems') arayarak ancak .masonry() sadece kendi ürünlerinin en yeni boyutlar temelinde öğeleri yeniden konumlandırmak olacaktır çağıran http://masonry.desandro.com/methods.html#reloaditems itibaren

$("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

.

Answer 3

deneyin jquery ile yeniden boyutlandırma olayı tetikleme:

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

Benim için çalıştı!