风格目录/瀑布流布局

瀑布流布局

Masonry Flow

Pinterest 风格的不等高卡片瀑布流布局，通过 CSS columns 或 masonry grid 实现自然流动的视觉效果，适合图片展示、作品集、社交媒体。

瀑布流Pinterest不等高图片墙作品集gallery

查看完整 Showcase →

配色方案

Primary

#1a1a2e

Secondary

#f5f5f5

Accent 1

#e94560

Accent 2

#16c79a

Accent 3

#ffd460

Accent 4

#7579e7

Quick Start

3 步开始使用 AI 生成

复制 AI Rules

粘贴到你的 AI 工具

• Cursor → 粘贴到 .cursorrules 文件

• Claude Code → 粘贴到 CLAUDE.md 文件

• Trae → 粘贴到 trae-rules.md 文件

开始生成

尝试："用瀑布流布局风格生成一个着陆页"

设计哲学

Masonry Flow（瀑布流布局）是一种模仿砖墙砌筑方式的布局，卡片按列排列，高度不一，形成自然流动的视觉效果。

核心理念： - 自然流动：内容高度由内容本身决定，无需强制等高 - 空间利用：最大化利用可视区域，减少留白浪费 - 视觉节奏：不规则高度创造有趣的视觉韵律 - 无限滚动：天然适合加载更多内容的交互模式

必须做 / Do's

+使用 CSS columns 实现简单瀑布流 columns-2 md:columns-3 lg:columns-4
+或使用 CSS Grid masonry（需浏览器支持）grid-rows-[masonry]
+卡片添加 break-inside-avoid 防止内容断裂
+统一卡片宽度，高度自适应内容
+保持列间距一致 gap-4 或 gap-6
+添加加载动画和懒加载图片
+响应式调整列数 columns-1 sm:columns-2 lg:columns-3

禁止做 / Don'ts

-禁止强制所有卡片等高（失去瀑布流特色）
-禁止卡片宽度不一致
-禁止间距不统一
-禁止忽略图片加载状态
-禁止在小屏幕使用过多列数

组件模板

组件预览

按钮

瀑布流风格的简洁按钮

tsx

<button className="
  px-5 py-2.5
  bg-zinc-900 text-white
  rounded-lg
  font-medium text-sm
  hover:bg-zinc-700
  transition-colors
">
  Load More
</button>

全局样式

Global CSS

css

/* Masonry Flow Global Styles */

/* CSS Columns based masonry */
.masonry-grid {
  columns: 1;
  column-gap: 1rem;
}

@media (min-width: 640px) {
  .masonry-grid {
    columns: 2;
  }
}

@media (min-width: 1024px) {
  .masonry-grid {
    columns: 3;
  }
}

@media (min-width: 1280px) {
  .masonry-grid {
    columns: 4;
  }
}

/* Prevent card breaking */
.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* Card hover effects */
.masonry-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.masonry-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Image loading placeholder */
.masonry-item img {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Loaded state */
.masonry-item img.loaded {
  background: none;
  animation: none;
}

快速开始

示例 Prompts

复制这些经过验证的 Prompt，快速开始用 AI 生成瀑布流布局风格的界面。

图片画廊

Pinterest 风格的图片瀑布流

Create a Pinterest-style photo gallery with masonry layout:
1. Use CSS columns for masonry: columns-2 md:columns-3 lg:columns-4
2. Cards with varying heights (aspect-[3/4], aspect-square, aspect-[4/5])
3. Each card: rounded-xl, overflow-hidden, shadow on hover
4. Image with lazy loading and hover scale effect
5. Optional overlay with title on hover
6. Filter tabs at top (All, Photos, Videos, etc.)
7. Load more button at bottom
All cards use break-inside-avoid, consistent gap-4

作品集展示

设计师作品集的瀑布流布局

Create a designer portfolio with masonry flow:
1. Masonry grid with columns-1 md:columns-2 lg:columns-3
2. Project cards with different aspect ratios
3. Each card shows: project image, title, category tag
4. Hover effect: reveal project description
5. Mix of image cards and text-only cards
6. Category filter navigation
7. Smooth scroll to load more projects
Cards use break-inside-avoid, rounded-2xl, elegant shadows

社交动态墙

社交媒体风格的内容流

Create a social media feed with masonry layout:
1. Masonry columns: columns-1 sm:columns-2 lg:columns-3
2. Mixed content cards: text posts, images, quotes, links
3. Each card has: avatar, username, timestamp, content, reactions
4. Image posts have varying aspect ratios
5. Text posts auto-height based on content
6. Hover to show action buttons (like, comment, share)
7. Infinite scroll loading indicator
Use break-inside-avoid, rounded-xl cards, subtle shadows

提示：复制时会自动附带该风格的设计规范

兼容的视觉风格

试试搭配

瀑布流布局是一种布局模式，可以与以下视觉风格搭配使用。

Glass Card

毛玻璃透明效果

玻璃拟态

Glassmorphism

Minimal

Flat Design

极简扁平风格

极简扁平风

Minimalist Flat

Soft UI

温和友好的设计

柔和界面风

Soft UI

Organic

自然温暖的风格

自然有机风

Natural Organic

Featured

Editorial

优雅的杂志排版，衬线标题与留白之美

编辑杂志风

Editorial

Style Pack

导出风格包

获取完整的可机器读取风格资源，包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设，可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量，适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

导出

AI Rules

将以下规则导出并添加到你的 AI 编码助手中，让它按照瀑布流布局风格生成代码。

You are a frontend expert specializing in Masonry Flow layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT make all cards the same height (defeats masonry purpose)
- Do NOT use inconsistent card widths
- Do NOT use inconsistent gaps
- Do NOT ignore image loading states
- Do NOT use too many columns on mobile

## Must Follow

- Use CSS columns: columns-2 md:columns-3 lg:columns-4
- Prevent break: break-inside-avoid on cards
- Consistent gap: gap-4 or column-gap equivalent
- Card widths: 100% of column
- Card heights: auto (content-driven)
- Responsive columns: reduce on smaller screens

## Layout Structure

Container:
- columns-1 sm:columns-2 lg:columns-3 xl:columns-4
- gap-4 (use column-gap and margin-bottom)

Card:
- break-inside-avoid
- mb-4 (margin bottom for spacing)
- rounded-xl overflow-hidden
- Full width within column

## Image Handling

- Always use aspect-ratio or height constraints
- Add loading="lazy" for performance
- Show placeholder during load
- Use object-cover for consistent fit

## Responsive

Mobile (< 640px): columns-1
Tablet (640px - 1024px): columns-2
Desktop (1024px+): columns-3 or columns-4

## Self-Check

After generating code, verify:
1. Cards have varying heights
2. Using break-inside-avoid
3. Consistent gaps
4. Images have aspect ratios
5. Responsive column count

Global CSS

css

/* Masonry Flow Global Styles */

/* CSS Columns based masonry */
.masonry-grid {
  columns: 1;
  column-gap: 1rem;
}

@media (min-width: 640px) {
  .masonry-grid {
    columns: 2;
  }
}

@media (min-width: 1024px) {
  .masonry-grid {
    columns: 3;
  }
}

@media (min-width: 1280px) {
  .masonry-grid {
    columns: 4;
  }
}

/* Prevent card breaking */
.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* Card hover effects */
.masonry-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.masonry-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Image loading placeholder */
.masonry-item img {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Loaded state */
.masonry-item img.loaded {
  background: none;
  animation: none;
}

示例 Prompts

复制这些经过验证的 Prompt，快速开始用 AI 生成瀑布流布局风格的界面。

图片画廊

Pinterest 风格的图片瀑布流

Create a Pinterest-style photo gallery with masonry layout:
1. Use CSS columns for masonry: columns-2 md:columns-3 lg:columns-4
2. Cards with varying heights (aspect-[3/4], aspect-square, aspect-[4/5])
3. Each card: rounded-xl, overflow-hidden, shadow on hover
4. Image with lazy loading and hover scale effect
5. Optional overlay with title on hover
6. Filter tabs at top (All, Photos, Videos, etc.)
7. Load more button at bottom
All cards use break-inside-avoid, consistent gap-4

作品集展示

设计师作品集的瀑布流布局

Create a designer portfolio with masonry flow:
1. Masonry grid with columns-1 md:columns-2 lg:columns-3
2. Project cards with different aspect ratios
3. Each card shows: project image, title, category tag
4. Hover effect: reveal project description
5. Mix of image cards and text-only cards
6. Category filter navigation
7. Smooth scroll to load more projects
Cards use break-inside-avoid, rounded-2xl, elegant shadows

社交动态墙

社交媒体风格的内容流

Create a social media feed with masonry layout:
1. Masonry columns: columns-1 sm:columns-2 lg:columns-3
2. Mixed content cards: text posts, images, quotes, links
3. Each card has: avatar, username, timestamp, content, reactions
4. Image posts have varying aspect ratios
5. Text posts auto-height based on content
6. Hover to show action buttons (like, comment, share)
7. Infinite scroll loading indicator
Use break-inside-avoid, rounded-xl cards, subtle shadows

提示：复制时会自动附带该风格的设计规范

导出风格包

获取完整的可机器读取风格资源，包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设，可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量，适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

AI Rules

将以下规则导出并添加到你的 AI 编码助手中，让它按照瀑布流布局风格生成代码。

You are a frontend expert specializing in Masonry Flow layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT make all cards the same height (defeats masonry purpose)
- Do NOT use inconsistent card widths
- Do NOT use inconsistent gaps
- Do NOT ignore image loading states
- Do NOT use too many columns on mobile

## Must Follow

- Use CSS columns: columns-2 md:columns-3 lg:columns-4
- Prevent break: break-inside-avoid on cards
- Consistent gap: gap-4 or column-gap equivalent
- Card widths: 100% of column
- Card heights: auto (content-driven)
- Responsive columns: reduce on smaller screens

## Layout Structure

Container:
- columns-1 sm:columns-2 lg:columns-3 xl:columns-4
- gap-4 (use column-gap and margin-bottom)

Card:
- break-inside-avoid
- mb-4 (margin bottom for spacing)
- rounded-xl overflow-hidden
- Full width within column

## Image Handling

- Always use aspect-ratio or height constraints
- Add loading="lazy" for performance
- Show placeholder during load
- Use object-cover for consistent fit

## Responsive

Mobile (< 640px): columns-1
Tablet (640px - 1024px): columns-2
Desktop (1024px+): columns-3 or columns-4

## Self-Check

After generating code, verify:
1. Cards have varying heights
2. Using break-inside-avoid
3. Consistent gaps
4. Images have aspect ratios
5. Responsive column count