> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/masonry.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# Masonry 瀑布流

排列高度不一的卡片与图片。

## 基本用法


### 灵感 1

不同高度的卡片

### 灵感 2

不同高度的卡片

### 灵感 3

不同高度的卡片

### 灵感 4

不同高度的卡片

### 灵感 5

不同高度的卡片

### 灵感 6

不同高度的卡片

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/masonry/basic.tsx"
import { Card, Masonry } from '@ifhover/leaf-ui';

export function MasonryBasic() {
  return (
    <Masonry columns={{ xs: 1, sm: 2, lg: 3 }} gap={16}>
      {[100, 160, 120, 180, 110, 140].map((height, index) => (
        <Card key={height} title={`灵感 ${index + 1}`}>
          <div style={{ height }}>不同高度的卡片</div>
        </Card>
      ))}
    </Masonry>
  );
}
```

展开代码

## 更多用法


![风景 1](/leaf-ui/media/landscape-1.svg)

![风景 2](/leaf-ui/media/landscape-2.svg)

![风景 3](/leaf-ui/media/landscape-3.svg)

advanced.tsx

复制代码

```tsx lineNumbers file="../../src/examples/masonry/advanced.tsx"
import { Image, Masonry } from '@ifhover/leaf-ui';

import { withBase } from '@rspress/core/runtime';

export function MasonryImages() {
  return (
    <Masonry columns={{ xs: 1, sm: 2 }}>
      {[1, 2, 3].map((index) => (
        <Image
          key={index}
          src={withBase(`/media/landscape-${index}.svg`)}
          alt={`风景 ${index}`}
          width="100%"
          height={index === 2 ? 220 : 150}
        />
      ))}
    </Masonry>
  );
}
```

展开代码

## 使用说明

按列从上到下排列；按行阅读或固定焦点顺序的内容建议使用 Grid。

## 类型

组装数据、定义回调和使用 ref 时，可以导入这些类型。

```ts
import type { MasonryProps } from '@ifhover/leaf-ui';
```

## MasonryProps API

| 属性        | 类型                                                                        | 默认值                       | 说明               |
| --------- | ------------------------------------------------------------------------- | ------------------------- | ---------------- |
| `columns` | `number \| Partial<Record<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl', number>>` | `{ xs: 1, sm: 2, lg: 3 }` | 列数；较大断点继承较小断点    |
| `gap`     | `number \| string`                                                        | `16`                      | 间距；数组为 \[纵向, 横向] |