我花了几个小时试图解决这个问题，但无济于事，包括 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
要重新加载砌体容器，您可以$('.grid').masonry();在单击事件上使用。
您的转换阻止了砌体在点击时获得正确的值。那么为什么不使用过渡中的构建砌体呢？只需添加transitionDuration: '0.2s'到砌体选项。
此外，您正在尝试使砌体容器扩展到页面的整个宽度。宽度属性 from#primary.closed阻止了这种情况。通过将其更改为 flex-basis，.closed点击添加时，它将从 66% 更改为 100% 。
检查这个 CodePen：https ://codepen.io/anon/pen/ddmmQM
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句