चिनाई प्लगइन: आकार का आकार बदलना

Question

मेज़री आइटम 1000px चौड़े div में लपेटा गया है, मेरे पास jQuery के addClass() का उपयोग करके 2000x को div का आकार बदलने का एक बटन है, समस्या यह है कि चिनाई अतिरिक्त 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"); 
    }); 

सीएसएस:।

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

मैं चल रहा की कोशिश की ('एक') सीएल एक ही बटन का उपयोग कर चिनाई समारोह पर ick, और यह सामान्य रूप से काम करता प्रतीत होता है लेकिन समस्या अभी भी वहां है।

कोई सलाह? मैं stumped हूँ:/

Answer 1

मुझे विश्वास है कि आपके पुन: आकार बटन पर क्लिक होने पर आपको चिनाई समारोह agian चलाने की जरूरत है।

$("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'); 

यह मेरे लिए काम किया!