← 返回导航

CSS 瀑布流

tricks

紫粉渐变

主色调渐变效果展示

紫色

粉橙渐变

温暖的粉橙配色方案,适合活泼风格的页面设计。

粉色

琥珀绿

清新自然的配色

琥珀

青绿色调

清新的青绿色渐变,给人宁静舒适的视觉感受。

绿色

青紫渐变

冷色调的青紫渐变,科技感十足,适合产品展示页面。

青色

紫琥珀

对比强烈的配色

紫色

粉紫梦幻

梦幻的粉紫色调,适合女性向产品、美妆、时尚类的页面设计,视觉冲击力强。

粉色

橙粉活力

充满活力的配色

琥珀

绿紫撞色

绿色与紫色的撞色搭配,大胆前卫,适合创意类设计。

绿色

关键点

  • CSS 瀑布流布局可通过 column-count 多列布局快速实现,简单高效
  • column-count 指定列数,column-gap 设置列间距,子元素自动填充
  • 子元素需设置 break-inside: avoid 防止内容被拆分到两列中
  • 优点是纯 CSS 实现、性能好、自适应;缺点是按列从上到下排列,顺序不是横向的
  • 如需横向排序或更复杂的控制,可使用 JS 方案(如 Masonry 库)或 CSS Grid 新特性

效果说明

利用 CSS column-count 属性实现的多列瀑布流布局。卡片高度不同,自动填充到最短的列中,形成错落有致的瀑布流效果。纯 CSS 实现,无需 JS 计算位置,hover 时卡片上浮并增强阴影。