砌体插件:调整div不会导致重新洗牌

Question

将砌体物品包裹在1000px宽的div中,我有一个按钮,使用jQuery将div重新调整为2000x 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').使用相同的按钮点击Masonry功能,它似乎正常工作,但问题仍然存在.

有什么建议？我很难过:/

Answer 1

我相信你需要在单击重新调整大小按钮时运行masianry函数.

$("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()将只根据项目的最新维度重新定位项目.