客户卡片瀑布流

灵感：能力工具箱 masonry（masonry-layout 客户卡片瀑布流）。

> 小四原创：网格容器 → Masonry 排布 → 图片/异步后 layout。
> 列宽用 sizer；卸载时 destroy。

何时使用

• 客户 digests 卡片墙
• 素材缩略图墙
• Demo 不等高卡片

硬约束

1. 依赖：masonry-layout（可按需 imagesloaded）。
2. 数据变更后调用 layout / reloadItems。
3. 实现要点注释标 小四原创。
4. 不做虚拟滚动/无限加载整套方案。

推荐实现

import Masonry from 'masonry-layout'

// 小四原创：客户卡片瀑布流
export function bindCardMasonry(grid: HTMLElement) {
  const msnry = new Masonry(grid, {
    itemSelector: '.customer-card',
    columnWidth: '.grid-sizer',
    percentPosition: true,
    gutter: 12,
  })
  return {
    layout: () => msnry.layout?.(),
    destroy: () => msnry.destroy?.(),
  }
}

Agent 步骤

1. npm i masonry-layout（类型按需）。
2. 网格内放 sizer + 卡片；onMounted 绑定。
3. 自测：不等高卡片错落对齐；卸载无泄漏。

不要做

• 固定等高假瀑布流却声称 Masonry。
• 忘记图片加载后重新 layout。

附加

• README.md · reference.md · templates/usage.md