iter(g305): 新增瀑布流布局 masonry

apps/demo/main.ts

@@ -62,6 +62,7 @@ import {
   upload,
   watermark,
   menu,
+  masonry,
   modal,
   mentions,
   multiSelect,
@@ -1930,6 +1931,21 @@ content.append(
       h('p', { class: 'desc' }, () => `当前顺序：${sortableOrder().join(' → ')}`),
     ),
   ),
+  section(
+    'sec-masonry',
+    '瀑布流',
+    'masonry：CSS 多列布局，列宽按 minColumnWidth 自适应（窄屏自动降列）、也能固定列数；每项包一层才不被列边界拆断，间距一处传值同时管列间距与行间距。',
+    masonry({
+      minColumnWidth: 200,
+      items: [
+        card({ title: '图片墙 ①' }, h('p', { class: 'desc' }, '列高不同才是瀑布流的价值：内容自己决定卡片高度，浏览器负责找最短列。')),
+        card({ title: '图片墙 ②' }, h('p', { class: 'desc' }, '短卡片。')),
+        card({ title: '图片墙 ③' }, h('p', { class: 'desc' }, '这一张内容偏长，用来制造高度差：文字越多卡片越高，多列布局才会错落起来，而不是排成整齐的行。')),
+        card({ title: '图片墙 ④' }, h('p', { class: 'desc' }, '中等长度的一段说明，两行左右。')),
+        card({ title: '图片墙 ⑤' }, h('p', { class: 'desc' }, '再一条短的。')),
+      ],
+    }),
+  ),
 );
 
 // 悬浮按钮：fixed 定位，挂 body 不参与页面布局