Widget:MiniWaterfall

另一个瀑布流（代码完全由AI编写）

用法示例

<div class="smart-wf"
     data-wf-gap="16"           <!-- 水平/垂直间距（px），默认 16 -->
     data-wf-min="240"          <!-- 列最小宽度（px），默认 240 -->
     data-wf-col-width=""       <!-- 固定列宽（px），留空则用 data-wf-min 自适应列数 -->
     data-wf-max-cols=""        <!-- 最大列数（可选），如 6 -->
     data-wf-debounce="80"      <!-- 事件去抖（ms），默认 80 -->
     >
  <div>...</div>
  <div>...</div>
  <!-- 任意数量子项（建议块级元素），内部高度可动态变化（图片/懒加载/折叠等） -->
</div>
{{#Widget:MiniWaterfall}}

你可以怎么配置（data- 属性）

data-wf-gap：项与项之间的水平/垂直间距（px），默认 16。

data-wf-min：自适应列数时的“最小列宽”（px），默认 240。容器会在允许的宽度下尽可能多列，但不小于该宽度。

data-wf-col-width：固定列宽（px）。一旦设置，则按该宽度 + 间距推导列数。

data-wf-max-cols：最大列数（可选），例如 6。

data-wf-debounce：监听事件的去抖时间（ms），默认 80。

自动重排触发场景（已内置）

子项高度变化（图片加载、异步内容、折叠/展开等）→ ResizeObserver 逐项监听。

子项增删、类名/行内样式变化 → MutationObserver 监听。

容器宽度变化（父容器响应式变化）→ ResizeObserver 监听容器。

窗口尺寸变化 → resize 事件。

对于不支持 ResizeObserver 的老环境，内置轮询降级（200ms 一次）。

对外 API（可选）

// 全局可用
smartWF.init();                 // 初始化页面上所有 .smart-wf
smartWF.init(containerEl);      // 初始化指定容器
smartWF.layout();               // 强制重排所有容器
smartWF.layout(containerEl);    // 强制重排指定容器
smartWF.refresh();              // 重新读取 data-attr 并重建观察器（例如你动态改了 data-wf-*）
smartWF.destroy(containerEl);   // 移除监听（需要时）