⚠️ 原文为 BricksLabs Pro 付费教程，核心代码锁定。本文按可见步骤写场景 + 骨架，代码用 Bricks 官方钩子补全并标注「补全实现」。
场景：手风琴内的瀑布流列表
需求：页面用 Accordion（Nestable） 组织多个板块，每个折叠面板里放一个文章查询循环，文章卡片要做成 Masonry 瀑布流（不同高度的卡片错落排列，无空隙）。常见于“分类手风琴 + 分类下文章瀑布流”的杂志式布局。
Masonry 与 Bricks 的关系
Bricks 的 Masonry 能力内置自 Isotope JS 库。普通 Container 开启 Masonry 布局（Layout → Masonry）即可生效。但问题出在嵌套环境：手风琴面板初始是折叠状态，高度为 0，Isotope 初始化时测量不到子元素的正确高度，瀑布流会塌陷或乱排；而且 Bricks 只对直接子元素做 sizer 测量，手风琴多包了一层容器后需要手动注入 sizer 元素。
Step 1：搭建手风琴 + 内层查询循环
在 Bricks 编辑器里：
- 添加 Accordion（Nestable） 元素，添加若干折叠项（静态或由查询循环生成均可）。
- 在每个面板内添加 Container，开启 Query Loop（Posts 查询），循环项是文章卡片。
- 卡片高度由内容决定（图片高度不固定），这是瀑布流效果的前提——固定高度就无所谓 Masonry 了。
- 保存后先关闭 Masonry 正常看一遍布局，确认内层循环本身没问题，再加瀑布流。
Step 2：启用 Masonry 并注入 sizer（补全实现）
Bricks 对 nestable accordion 元素的 masonry 控件默认不直接暴露在面板内层容器上，需要两步：
- 给内层容器开启 Masonry 布局：选中内层查询容器，布局模式选 Masonry，列数按设计设定（如 3 列）。
- 注入 Isotope sizer 元素：Isotope 计算百分比宽度需要每个元素里有一个 sizer 标记（通常是宽度 100% 的透明元素）。在卡片循环项内部加一个子元素，标记为 sizer（Bricks 在 Masonry 布局下会自动识别
.bricks-isotope-sizer类，或通过数据属性识别）。
以下为补全实现（基于 Bricks 官方前端钩子 bricks/frontend/after_enqueue_scripts），用于确保手风琴展开后再触发一次 Isotope 重排——这是折叠容器里 Masonry 生效的关键，放入子主题 functions.php（去掉开头 <?php）：
// 补全实现：手风琴展开后重排 Isotope，非原文代码
add_action( 'bricks/frontend/after_enqueue_scripts', function() {
?>
<script>
document.addEventListener( 'DOMContentLoaded', function() {
// 监听手风琴展开事件（Bricks Accordion 展开后触发）
document.querySelectorAll( '.brxe-accordion-nestable' ).forEach( function( acc ) {
acc.addEventListener( 'click', function( e ) {
var btn = e.target.closest( '.accordion-title-wrapper' );
if ( ! btn ) return;
// 面板展开后（延时确保内容可见），触发 Isotope 重新布局
setTimeout( function() {
var container = btn.closest( '.brxe-accordion-nestable' )
.querySelector( '.bricks-masonry' ); // 开启 masonry 的容器
if ( container && window.Isotope && container.data && container.data('isotope') ) {
container.data('isotope').layout();
}
}, 350 );
} );
} );
} );
</script>
<?php
} );要点说明：
- 延迟 350ms 左右：等待手风琴展开动画完成、内容可见后重排，否则测量高度仍为 0。
container.data('isotope').layout()：Isotope 实例的layout()方法按当前内容重新计算位置，这是修复折叠容器瀑布流的标准手段。- 若手风琴面板内是 AJAX 加载的内容（如懒加载），还需在内容加载完成后再次调用
layout()。
中文小结
手风琴 + Masonry 的组合坑不在查询，而在折叠容器的测量时机：Isotope 初始化时面板高度为 0，导致瀑布流塌陷。解法就两条：面板展开后重新触发 layout()，以及确保 sizer 元素存在让百分比宽度计算正确。Bricks 内置 Isotope 省去了引库的麻烦，剩下的就是“在正确的时机让 Isotope 重新算一遍”。同样的思路也适用于 Tab 面板、Popup、AJAX 加载内容里的 Masonry——凡是初始不可见再出现的容器，都需要展开后重排。