砌体插件：调整 div 大小不会导致重新洗牌答案

【问题标题】：Masonry Plugin: Resizing div wont cause reshuffle砌体插件：调整 div 大小不会导致重新洗牌
【发布时间】：2011-09-26 10:28:42
【问题描述】：

将砌体项目包裹在 1000 像素宽的 div 中，我有一个使用 jQuery 的 addClass() 将 div 调整为 2000 倍的按钮，问题是砌体不会重新调整项目以填充额外的 1000 像素空间，我知道调整大小是有效的，因为调整浏览器窗口的大小会导致重新洗牌。

砌体：

$(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 功能，它似乎可以正常工作，但问题仍然存在。

有什么建议吗？我被难住了：/

【问题讨论】：

标签： jquery css layout jquery-masonry

【解决方案1】：

我相信您需要在单击调整大小按钮时再次运行 masonry 函数。

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

【讨论】：

你心里有办法吗？单击按钮时，我运行了默认的 Masonry 功能，但问题仍然存在，它只是继承了调整大小之前的样子，除非我调整浏览器窗口的大小。 ://
还有 $("#container|).masonry("reload"); 会实现这个

【解决方案2】：

从 http://masonry.desandro.com/methods.html#reloaditems 调用 .masonry('reloadItems') 将抓取（可能是新的）与 itemSelector 匹配的项目并重新定位砖块，但调用 .masonry() 将仅根据其项目的最新尺寸重新定位项目。

【讨论】：

【解决方案3】：

尝试用 jquery 触发 resize 事件：

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

它对我有用！

【讨论】：

这是一种非常糟糕的触发重新加载功能的方式，因为它会导致浏览器重新绘制并触发其他不需要的调整大小侦听器。更不用说它很脆弱，因为可以禁用砌体上的调整大小监听器。