6

将砌体项目包裹在 1000 像素宽的 div 中，我有一个使用 jQuery 将 div 调整为 2000 倍的按钮addClass()，问题是砌体不会重新调整项目以填充额外的 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').click 使用相同按钮的 Masonry 功能，它似乎工作正常，但问题仍然存在。

有什么建议吗？我很难过：/

4

3 回答 3

10

我相信您需要在单击调整大小按钮时再次运行砌体功能。

$("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
    });
});
于 2011-07-01T02:33:55.167 回答
8

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

于 2011-11-22T20:47:30.683 回答
-2

尝试使用 jquery 触发调整大小事件：

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

它对我有用！

于 2012-08-29T18:03:38.347 回答