Masonry.tsx

基本信息

• 类型: React 组件 (自定义)
• 路径: ./src/components/ui/masonry.tsx

功能描述

瀑布流布局组件，自动计算子元素高度并按列排列。支持响应式列数、RTL（从右到左）布局、自适应重排。

导出内容

• Masonry - 瀑布流布局组件

Props 接口

Masonry

属性	类型	必填	默认值	说明
children	ReactNode[]	是	-	子元素数组
columnCount	{ default: number; md?: number; lg?: number; xl?: number; }	否	{ default: 1, md: 2, lg: 3 }	响应式列数配置
gap	number	否	16	元素间距（像素）
className	string	否	""	自定义CSS类名

响应式断点

• default - 默认列数
• md - >= 768px 时的列数
• lg - >= 1024px 时的列数
• xl - >= 1280px 时的列数

依赖

• React 内置 Hooks (useEffect, useRef, useState, useCallback)

使用示例

import { Masonry } from "@/components/ui/masonry";

// 基础用法
<Masonry>
  {items.map((item) => (
    <Card key={item.id}>
      <CardContent>{item.content}</CardContent>
    </Card>
  ))}
</Masonry>

// 自定义列数和间距
<Masonry
  columnCount={{ default: 1, md: 2, lg: 3, xl: 4 }}
  gap={24}
  className="my-8"
>
  {images.map((img) => (
    <img key={img.id} src={img.url} alt={img.alt} />
  ))}
</Masonry>

// 图片画廊
<Masonry columnCount={{ default: 2, lg: 3 }} gap={16}>
  {photos.map((photo) => (
    <div key={photo.id} className="break-inside-avoid">
      <img src={photo.src} className="w-full rounded-lg" />
      <p className="mt-2 text-sm">{photo.caption}</p>
    </div>
  ))}
</Masonry>