HIsheR
22 lines
1.2 KiB
TypeScript
22 lines
1.2 KiB
TypeScript
import { h } from '@ui-arch/frame';
|
|
import type { MasonryProps } from './types.js';
|
|
|
|
/*** 瀑布流：CSS 多列布局，列数按容器宽度自适应或显式指定；每项单独包一层才能 break-inside 不拆断 ***/
|
|
export function masonry(props: MasonryProps): HTMLElement {
|
|
// —— 状态集中声明 ——
|
|
const adaptive = !props.columns; // 未指定列数即自适应（column-width 让浏览器自己算列数）
|
|
const width = props.minColumnWidth ?? 240; // 自适应时的最小列宽（像素）
|
|
const gap = props.gap ?? 'var(--ua-space-3)'; // 列间距与行间距同源，避免两处各写一份
|
|
const root = h('div', { class: 'ua-masonry' }) as HTMLElement;
|
|
root.style.columnGap = gap;
|
|
if (adaptive) root.style.columnWidth = `${width}px`; // 自适应：容器越宽列数越多，窄屏自动降到一列
|
|
else root.style.columnCount = String(props.columns); // 显式列数：与 column-width 互斥，固定几列就几列
|
|
|
|
props.items.forEach((item) => {
|
|
const cell = h('div', { class: 'ua-masonry-item' }, item);
|
|
cell.style.marginBottom = gap; // 行间距与列间距同值，视觉上才是均匀网格
|
|
root.append(cell);
|
|
});
|
|
return root;
|
|
}
|