Bricks Masonry 手风琴：Accordion（Nestable）里的瀑布流查询循环

⚠️ 原文为 BricksLabs Pro 付费教程，核心代码锁定。本文按可见步骤写场景 + 骨架，代码用 Bricks 官方钩子补全并标注「补全实现」。

场景：手风琴内的瀑布流列表

需求：页面用 Accordion（Nestable） 组织多个板块，每个折叠面板里放一个文章查询循环，文章卡片要做成 Masonry 瀑布流（不同高度的卡片错落排列，无空隙）。常见于“分类手风琴 + 分类下文章瀑布流”的杂志式布局。

Masonry 与 Bricks 的关系

Bricks 的 Masonry 能力内置自 Isotope JS 库。普通 Container 开启 Masonry 布局（Layout → Masonry）即可生效。但问题出在嵌套环境：手风琴面板初始是折叠状态，高度为 0，Isotope 初始化时测量不到子元素的正确高度，瀑布流会塌陷或乱排；而且 Bricks 只对直接子元素做 sizer 测量，手风琴多包了一层容器后需要手动注入 sizer 元素。

Step 1：搭建手风琴 + 内层查询循环

在 Bricks 编辑器里：

1. 添加 Accordion（Nestable） 元素，添加若干折叠项（静态或由查询循环生成均可）。

2. 在每个面板内添加 Container，开启 Query Loop（Posts 查询），循环项是文章卡片。

3. 卡片高度由内容决定（图片高度不固定），这是瀑布流效果的前提——固定高度就无所谓 Masonry 了。

4. 保存后先关闭 Masonry 正常看一遍布局，确认内层循环本身没问题，再加瀑布流。

Step 2：启用 Masonry 并注入 sizer（补全实现）

Bricks 对 nestable accordion 元素的 masonry 控件默认不直接暴露在面板内层容器上，需要两步：

1. 给内层容器开启 Masonry 布局：选中内层查询容器，布局模式选 Masonry，列数按设计设定（如 3 列）。

2. 注入 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()。

相关阅读：

• Bricks 手风琴（Nestable）：第一项桌面端展开、移动端收起

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

中文小结

手风琴 + Masonry 的组合坑不在查询，而在折叠容器的测量时机：Isotope 初始化时面板高度为 0，导致瀑布流塌陷。解法就两条：面板展开后重新触发 layout()，以及确保 sizer 元素存在让百分比宽度计算正确。Bricks 内置 Isotope 省去了引库的麻烦，剩下的就是“在正确的时机让 Isotope 重新算一遍”。同样的思路也适用于 Tab 面板、Popup、AJAX 加载内容里的 Masonry——凡是初始不可见再出现的容器，都需要展开后重排。

性能与注意事项

手风琴 + Masonry 最忌在面板「还没展开」时就初始化瀑布流——此时容器高度为 0，Isotope 算出来的位置全错。通用规律是：凡是初始不可见、之后才出现的容器（Tab、Popup、AJAX 加载的内容），都要在它真正显示后再触发一次 layout()。另外图片是瀑布流错位的头号元凶：图片加载完高度才确定，所以要在图片 onload 之后重排，或给卡片固定宽高比。sizer 元素也必须存在，否则百分比宽度算不出来。Bricks 内置 Isotope 省了引库的麻烦，剩下的就是「在正确的时机让 Isotope 重新算一遍」。

常见问题（FAQ）

Q：为什么瀑布流会塌陷？ A：面板初始高度为 0，Isotope 在不可见时初始化算错位置；等面板展开后重新调用 layout() 即可恢复。

Q：一定要用 Isotope 吗？ A：Bricks 内置 Isotope，省去自己引库；纯 CSS columns 也能做瀑布流，但卡片会按列排序、顺序不如 Isotope 自然。

Q：图片加载后卡片错位怎么办？ A：图片加载完高度才变化，要在图片 onload 之后重排，或给卡片设固定宽高比，让 Isotope 一开始就能算对。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
• 相关阅读：Bricks Query Loop Api Data

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程