跳转到内容
AsterUI v0.12.76

Masonry

Pinterest 风格的瀑布流布局，用于在有组织的网格中显示高度不同的项目。

导入

Section titled “导入”
import { Masonry } from 'asterui'

示例

Section titled “示例”

动态项目

动态添加和删除项目。新项目被放置在最短的列中。

Item 1
Item 2
Item 3
 
import { Masonry, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const COLORS = ['#0092ff', '#00d084', '#ff6b6b', '#ffd93d', '#a29bfe', '#fd79a8']
  const HEIGHTS = [100, 120, 140, 160, 180, 200]
  
  interface Item { id: number; color: string; height: number }
  
  const [items, setItems] = useState<Item[]>([
    { id: 1, color: COLORS[0], height: 120 },
    { id: 2, color: COLORS[1], height: 180 },
    { id: 3, color: COLORS[2], height: 140 },
  ])
  const [nextId, setNextId] = useState(4)
  
  const addItem = () => {
    setItems([...items, {
      id: nextId,
      color: COLORS[Math.floor(Math.random() * COLORS.length)],
      height: HEIGHTS[Math.floor(Math.random() * HEIGHTS.length)],
    }])
    setNextId(nextId + 1)
  }
  
  const removeItem = (id: number) => setItems(items.filter(item => item.id !== id))
  
  return (
      <div>
        <div className="mb-4">
          <Button color="primary" onClick={addItem}>Add Item</Button>
        </div>
        <Masonry columns={3} gap={16}>
          {items.map(item => (
            <div
              key={item.id}
              className="relative rounded-lg"
              style={{ background: item.color, padding: '16px', color: 'white', height: item.height }}
            >
              <Button
                variant="ghost"
                size="sm"
                shape="circle"
                className="absolute top-1 right-1 min-h-0 h-6 w-6 text-white hover:bg-black/20"
                onClick={() => removeItem(item.id)}
              >
                ×
              </Button>
              Item {item.id}
            </div>
          ))}
        </Masonry>
      </div>
    )
}

export default App

基础瀑布流

带不同高度项目的简单瀑布流网格。

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
 
import { Masonry } from 'asterui'

function App() {
  return (
      <Masonry columns={3} gap={16}>
        <div style={{ background: '#0092ff', padding: '16px', color: 'white', height: '120px' }}>
          Item 1
        </div>
        <div style={{ background: '#00d084', padding: '16px', color: 'white', height: '180px' }}>
          Item 2
        </div>
        <div style={{ background: '#ff6b6b', padding: '16px', color: 'white', height: '140px' }}>
          Item 3
        </div>
        <div style={{ background: '#ffd93d', padding: '16px', color: 'white', height: '200px' }}>
          Item 4
        </div>
        <div style={{ background: '#a29bfe', padding: '16px', color: 'white', height: '160px' }}>
          Item 5
        </div>
        <div style={{ background: '#fd79a8', padding: '16px', color: 'white', height: '130px' }}>
          Item 6
        </div>
      </Masonry>
    )
}

export default App

响应式列

在不同断点下的响应式列数。

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
 
import { Masonry } from 'asterui'

function App() {
  return (
      <Masonry columns={{ xs: 1, sm: 2, md: 3, lg: 4 }} gap={16}>
        <div style={{ background: '#0092ff', padding: '16px', color: 'white', height: '120px' }}>
          Item 1
        </div>
        <div style={{ background: '#00d084', padding: '16px', color: 'white', height: '180px' }}>
          Item 2
        </div>
        <div style={{ background: '#ff6b6b', padding: '16px', color: 'white', height: '140px' }}>
          Item 3
        </div>
        <div style={{ background: '#ffd93d', padding: '16px', color: 'white', height: '200px' }}>
          Item 4
        </div>
        <div style={{ background: '#a29bfe', padding: '16px', color: 'white', height: '160px' }}>
          Item 5
        </div>
        <div style={{ background: '#fd79a8', padding: '16px', color: 'white', height: '130px' }}>
          Item 6
        </div>
        <div style={{ background: '#74b9ff', padding: '16px', color: 'white', height: '150px' }}>
          Item 7
        </div>
        <div style={{ background: '#fab1a0', padding: '16px', color: 'white', height: '170px' }}>
          Item 8
        </div>
      </Masonry>
    )
}

export default App

自定义间距

项目之间的不同间距尺寸。

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
 
import { Masonry } from 'asterui'

function App() {
  return (
      <Masonry columns={3} gap={32}>
        <div style={{ background: '#0092ff', padding: '16px', color: 'white', height: '120px' }}>
          Item 1
        </div>
        <div style={{ background: '#00d084', padding: '16px', color: 'white', height: '180px' }}>
          Item 2
        </div>
        <div style={{ background: '#ff6b6b', padding: '16px', color: 'white', height: '140px' }}>
          Item 3
        </div>
        <div style={{ background: '#ffd93d', padding: '16px', color: 'white', height: '200px' }}>
          Item 4
        </div>
        <div style={{ background: '#a29bfe', padding: '16px', color: 'white', height: '160px' }}>
          Item 5
        </div>
        <div style={{ background: '#fd79a8', padding: '16px', color: 'white', height: '130px' }}>
          Item 6
        </div>
      </Masonry>
    )
}

export default App

API

Section titled “API”

Masonry

Section titled “Masonry”
属性描述类型默认值
columns列数或响应式列配置number | { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, '2xl'?: number }3
gap项目之间的间距（像素）number16
children在瀑布流布局中显示的项目React.ReactNode-
className额外的 CSS 类名string-
data-testid用于测试的测试 IDstring-

使用说明

Section titled “使用说明”
  • Masonry 组件创建 Pinterest 风格的布局，其中项目排列在列中
  • 项目流入最短的列以创建平衡的布局
  • 使用 columns 属性设置固定列数或使其响应式
  • gap 属性控制项目之间的间距（像素）
  • 响应式断点：xs（<640px）、sm（≥640px）、md（≥768px）、lg（≥1024px）、xl（≥1280px）、2xl（≥1536px）
  • 项目可以有不同的高度 - 布局将自动高效地分配它们
  • 非常适合图片画廊、产品网格和内容卡片