Resize/reload 的 Masonry 容器在单击后未触发

Question

我花了数小时尝试解决此问题但无济于事，包括 reloadItems、单击时完全重新初始化 Masonry，以及我在 Whosebug 上发现的大约 100 个其他问题。基本上，我有一个隐藏侧边栏的按钮，单击时，我希望 Masonry 容器自动刷新并扩展到 3 列。目前，如果您调整 window 的大小，它会起作用，但在初始点击时不起作用。此外，当您调整 window 的大小时并单击按钮再次显示侧边栏时，布局会重叠。任何帮助将不胜感激。

我的 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');
    });
});

这是一个代码笔：https://codepen.io/anon/pen/QQmjRW

Answer 1

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

您的转换阻止砌体在点击时获得正确的值。那么，为什么不将转换中的构建用于砌体呢？只需在砌体选项中添加 transitionDuration: '0.2s'。

此外，您正在尝试使砖石容器扩展到整个页面宽度。 #primary.closed 的 width 属性阻止了这种情况。通过将其更改为 flex-basis，当单击添加 .closed 时，它将从 66% 更改为 100%。

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

Resize/reload 的 Masonry 容器在单击后未触发

Resize/reload of Masonry container not firing after click

jquery

jquery-masonry

masonry