当前位置：首页 > article >正文

css如何制作瀑布流

article 2024/10/7 19:15:33

什么是瀑布流？

‌瀑布流是一种网站页面布局方式，视觉表现为宽度相等、高度不定的元素组成的参差不齐的多栏布局。‌ 随着页面向下滚动，新的元素会附加到最短的一列，不断向下加载‌。

瀑布流的特点包括：

‌参差不齐的排列方式‌：元素的高度各不相同，形成一种动态的视觉效果。
‌流式布局的扩展性‌：用户可以不断向下浏览，加载更多内容。
‌适用于图片为主的网站‌：常见于一些图片、新闻、博客等内容的展示，有效利用空间，提高用户体验‌

纯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>