在现代网页设计中，创建内容动态、高度不一的卡片式布局是一个常见需求，尤其是在展示笔记、文章摘要或图片流时，类似google keep的瀑布流（masonry）布局因其高效利用空间和良好的视觉体验而广受欢迎。虽然传统的flexbox或grid布局在处理等高或固定高度的网格时表现出色，但对于高度不一的卡片，它们往往难以实现紧凑的瀑布流效果。幸运的是，css提供了一个专门用于多列布局的columns属性，可以非常简洁地实现这一效果。
使用 CSS columns 属性实现卡片布局
CSS columns 属性的设计初衷是为了将内容分成报纸式的多列。当应用于一个容器时，其子元素会从上到下填充第一列，然后溢出到第二列，依此类推。这正是实现类似Google Keep布局的关键。
核心 CSS 代码
:root {
--gap: .5rem; /* 定义一个间距变量，方便管理 */
}
.columnLayout {
columns: 2; /* 将容器内容分成2列 */
column-gap: var(--gap); /* 定义列之间的间距 */
padding: var(--gap) var(--gap) 0 var(--gap); /* 为容器添加内边距 */
}
.columnLayout div {
display: inline-block; /* 关键：使每个卡片独立显示并参与多列布局 */
margin-bottom: var(--gap); /* 定义卡片之间的垂直间距 */
width: 100%; /* 确保卡片占据其所在列的全部宽度 */
}
/* 以下样式仅用于美化，与布局核心逻辑无关 */
* { box-sizing: border-box }
body{ background-color: black; color: white; font: 16px sans-serif; margin: 0 }
.columnLayout div { border: 1px solid currentColor; border-radius: .5rem; padding: .5rem }HTML 结构
1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, enim?2. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem animi similique placeat voluptatibus nihil cupiditate!3. Lorem ipsum dolor sit amet consectetur, adipisicing elit. At quis odit tenetur adipisci?4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ab.5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam distinctio dolores fuga sit culpa provident modi ex ipsa aspernatur maiores?6. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus exercitationem ex inventore vel, quo natus esse quos veritatis deserunt hic commodi architecto suscipit ad, ipsa, nulla sapiente totam dicta.7. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dolorum similique dolores, est sequi autem?
实现原理与注意事项
-
columns 属性:
- columns: 2; 表示将容器内容分成两列。你也可以使用 columns: 200px; 来指定列的最小宽度，浏览器会根据可用空间自动计算列的数量。
- column-gap: var(--gap); 设置列与列之间的水平间距。
-
卡片样式 (.columnLayout div):
- display: inline-block; 是实现此布局的关键。它使每个卡片成为一个独立的块级元素，但又能够像行内元素一样在多列中流动。如果使用 display: block;，则每个卡片会独占一行，无法形成多列布局。
- margin-bottom: var(--gap); 为卡片之间提供垂直间距，避免它们紧密贴合。
- width: 100%; 确保每个卡片在其所在的列中占据全部可用宽度。
- 浏览器兼容性: columns 属性具有良好的浏览器兼容性，甚至包括Internet Explorer的部分版本。你可以查阅MDN Web Docs获取详细兼容性信息。
- 内容流向: 使用 columns 属性时，内容是先垂直填充一列，再填充下一列。这意味着，如果你有1、2、3、4、5、6六个卡片，它们可能会按1-3-5（第一列）、2-4-6（第二列）的顺序排列。这与某些严格的“从左到右，然后换行”的瀑布流布局有所不同，但与Google Keep的视觉效果非常接近。
替代方案：JavaScript 瀑布流库
如果你的需求是严格按照“从左到右，然后向下换行，并且下一行从最矮的列开始填充”这种传统的瀑布流布局，那么仅凭CSS columns 可能无法完全满足。在这种情况下，你需要借助JavaScript来实现。
Masonry JS 是一个非常流行且功能强大的JavaScript库，专门用于创建这种动态的、响应式的瀑布流布局。它会根据卡片的高度和可用空间，自动计算并调整卡片的位置，以实现最佳的排列效果。
Masonry JS 的特点
- 动态定位: Masonry JS会计算每个卡片的高度，并将其放置在当前最短的列中，从而最大限度地减少垂直空白。
- 响应式: 可以根据屏幕尺寸变化自动调整列数和布局。
- 易于集成: 提供简单的API，方便开发者在项目中集成。
如果你不希望自己编写复杂的JavaScript代码来处理卡片定位，Masonry JS或类似的库（如Isotope）将是理想的选择。它们提供了高度优化的解决方案，能够处理各种复杂的布局场景。
立即学习“前端免费学习笔记（深入）”；
总结
实现类似Google Keep的卡片布局，主要有两种方法：
- CSS columns 属性: 适用于需要简单、纯CSS实现，且内容流向（先垂直填充列，再水平移动到下一列）符合需求的场景。它简单、高效且兼容性良好。
- JavaScript 瀑布流库（如Masonry JS）: 适用于需要严格的从左到右、然后向下换行的瀑布流布局，或者需要更高级的动态布局控制（如过滤、排序）的场景。虽然引入了JavaScript依赖，但能提供更精细的布局控制和用户体验。
根据你的具体项目需求和对布局精确度的要求，选择最适合你的方法即可。对于大多数类似Google Keep的视觉效果，CSS columns 属性往往是更简洁高效的选择。
