什么是瀑布流？
瀑布流是一种网站页面布局方式，视觉表现为宽度相等、高度不定的元素组成的参差不齐的多栏布局。 随着页面向下滚动，新的元素会附加到最短的一列，不断向下加载。
瀑布流的特点包括：
- 参差不齐的排列方式：元素的高度各不相同，形成一种动态的视觉效果。
- 流式布局的扩展性：用户可以不断向下浏览，加载更多内容。
-
适用于图片为主的网站：常见于一些图片、新闻、博客等内容的展示，有效利用空间，提高用户体验
纯css写法.waterfall {/* 分为3列 */column-count: 3;/* 列之间的间隙 */column-gap: 1em;/* 清除默认的内边距 */padding: 0; }.item {/* 设置背景、边框、边距等样式 */background-color: #f4f4f4;border: 1px solid #ddd;margin-bottom: 1em;padding: 1em;/* 确保内容不会被拆分到两列中 */break-inside: avoid; }在这个例子中，.waterfall 类定义了瀑布流容器的样式，其中 column-count 属性用于设置列数，column-gap 属性用于设置列之间的间隙。.item 类则定义了每个项目的样式。
注意，虽然 CSS3 的列布局为创建瀑布流布局提供了一种简单的方法，但它可能不适合所有情况。例如，对数据进行排序的话，这种的排序顺序是竖着的，如果你需要更复杂的布局控制，或者需要在不同屏幕大小下有不同的列数，那么可能需要使用 JavaScript 或更复杂的 CSS 技术。
此外，break-inside: avoid; 属性用于确保每个项目的内容不会被拆分到两列中，这有助于保持瀑布流布局的视觉一致性。但是，这个属性可能在一些旧的或不支持的浏览器中不起作用。
制作瀑布流布局可以通过 CSS Flexbox、Grid 或使用 JavaScript 来实现。以下是使用 CSS Grid 和 Flexbox 的示例：
示例 1：使用 CSS Grid
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 使页面在移动设备上响应式显示 --><title>瀑布流布局 - CSS Grid</title><style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;/*设置字体*/background-color: #f4f4f4;}.grid-container {display: grid;/* 使用CSS Grid布局 */grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));/* 自动填充列，最小宽度200px */gap: 16px;/* 设置网格项之间的间隙为16px */padding: 16px;/* 为容器添加内边距 */}.grid-item {background-color: white;/* 设置网格项的背景色 */border: 1px solid #ddd;/* 设置边框样式 */border-radius: 4px;/* 设置圆角 */overflow: hidden;/* 隐藏溢出的内容 */box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);/* 添加阴影效果 */padding: 10px;/* 为网格项添加内边距 */text-align: center;/* 文本居中对齐 */}img {max-width: 100%;/* 图片最大宽度为100%，以适应容器 */border-radius: 4px;/* 图片添加圆角 */}</style></head><body><div class="grid-container"> <!-- 网格容器 --><div class="grid-item"><img src="https://via.placeholder.com/200x150" alt="Placeholder 1"></div><div class="grid-item"><img src="https://via.placeholder.com/200x300" alt="Placeholder 2"></div><div class="grid-item"><img src="https://via.placeholder.com/200x200" alt="Placeholder 3"></div><div class="grid-item"><img src="https://via.placeholder.com/200x250" alt="Placeholder 4"></div><div class="grid-item"><img src="https://via.placeholder.com/200x100" alt="Placeholder 5"></div><div class="grid-item"><img src="https://via.placeholder.com/200x350" alt="Placeholder 6"></div></div></body>
</html>示例 2：使用 CSS Flexbox
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 使页面在移动设备上响应式显示 --><title>瀑布流布局 - Flexbox</title><style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;/* 设置字体为Arial或无衬线体 */background-color: #f4f4f4;}.flex-container {display: flex;/* 使用Flexbox布局 */flex-wrap: wrap;/* 允许子元素换行 */gap: 16px;/* 设置子元素之间的间隙为16px */padding: 16px;/* 为容器添加内边距 */}.flex-item {background-color: white;/* 设置每个子元素的背景色为白色 */border: 1px solid #ddd;/* 设置边框样式为浅灰色 */border-radius: 4px;/* 设置圆角半径为4px */overflow: hidden;/* 隐藏溢出的内容 */box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);/* 添加阴影效果 */flex: 1 1 200px;/* 设置子元素的生长、缩小以及基础宽度为200px */text-align: center;}img {max-width: 100%;/* 图片最大宽度为100%，以适应其容器 */border-radius: 4px;/* 图片添加圆角 */}</style></head><body><div class="flex-container"> <!-- 创建一个Flexbox容器 --><div class="flex-item"><img src="https://via.placeholder.com/200x150" alt="Placeholder 1"></div><!-- 第一项，包含一张占位符图片 --><div class="flex-item"><img src="https://via.placeholder.com/200x300" alt="Placeholder 2"></div><!-- 第二项，包含一张高度更大的占位符图片 --><div class="flex-item"><img src="https://via.placeholder.com/200x200" alt="Placeholder 3"></div><!-- 第三项，包含一张正方形占位符图片 --><div class="flex-item"><img src="https://via.placeholder.com/200x250" alt="Placeholder 4"></div><!-- 第四项，包含一张长方形占位符图片 --><div class="flex-item"><img src="https://via.placeholder.com/200x100" alt="Placeholder 5"></div><!-- 第五项，包含一张较矮的占位符图片 --><div class="flex-item"><img src="https://via.placeholder.com/200x350" alt="Placeholder 6"></div><!-- 第六项，包含一张较高的占位符图片 --></div></body>
</html>说明
- CSS Grid：利用
grid-template-columns设置自动填充的列，并定义最小宽度。使用gap进行间距设置。 - Flexbox：使用
flex-wrap: wrap使元素在容器中换行，使用flex: 1 1 200px设置基础宽度和自适应性。
你可以根据需要调整项的大小和数量，以上代码能够适应不同屏幕尺寸，实现简单的瀑布流效果。
