Masonry Plugin: Resizing div wont cause reshuffle

问题:

Have Masonry items wrapped in 1000px wide div, I have a button to resize the div to 2000x using jQuery's addClass(), problem is Masonry won't reshuffle the items to fill the extra 1000px space, I know the resize works because resizing the browser window causes a reshuffle.

Masonry:

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

Button:

$("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 tried running ('a').click on the Masonry function using the same button, and it seems to work normally but the problem is still there.

Any advice? I'm stumped :/

回答1:

I believe you need to run the masonry function agian when your re-size button is clicked.

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

回答2:

From http://masonry.desandro.com/methods.html#reloaditems , calling .masonry('reloadItems') will grab (possibly new) items that match itemSelector and reposition the bricks, but calling .masonry() will just reposition items based on the most recent dimensions of its items.

回答3:

Try triggering the resize event with jquery:

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

It worked for me!