Question

我花了好几个小时试图对此进行无故障排除，包括reloadItems，完全依靠点击重新初始化Masonry，以及我在StackOverflow上发现的大约100个其他内容。基本上，我有一个隐藏侧边栏的按钮，当点击时，我希望Masonry容器自动刷新并扩展到3列。目前，如果您调整窗口大小，它可以工作，但不是初始点击。此外，当您调整窗口大小并单击按钮再次显示侧栏时，布局会重叠。任何帮助将不胜感激。

我的JS：

jQuery(document).ready(function($) {
    // Masonry
    $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer',
        gutter: '.gutter-sizer',
        percentPosition: true,
        horizontalOrder: true
    });

    // Sidebar
    $('button').on('click', function(){
        $('#primary').toggleClass('closed');
        $('#secondary').toggleClass('closed');
    });
});

这是一个Codepen：https://codepen.io/anon/pen/QQmjRW

Answer 1

要重新加载砌体容器，您可以在点击事件中使用$('.grid').masonry();。

您的过渡会阻止砌体在点击时获得正确的值。那么为什么不在砌体过渡中使用构建？只需将transitionDuration: '0.2s'添加到砌体选项中。

此外，您正在尝试使砌体容器在页面的整个宽度上展开。来自#primary.closed的width属性阻止了这一点。通过将其更改为以flex为单位，在点击时添加.closed时，它将从66％更改为100％。

检查此CodePen：https://codepen.io/anon/pen/ddmMQM

单击后不调整的砌体容器的大小/重新加载

1 个答案: