Masonry 插件：调整 div 大小不会导致重新洗牌

发布于 2024-11-17 18:31:20 字数 807 浏览 2 评论 0原文

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

Masonry：

$(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 函数，似乎工作正常但问题依然存在。

有什么建议吗？我很困惑：/

原文

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 :/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

安稳善良 2024-11-24 18:31:20

我相信当您单击调整大小按钮时，您需要再次运行砌体函数。

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

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
    });
});

回复收藏 0 原文

分开我的手 2024-11-24 18:31:20

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