瀑布流布局层次感更有利于用户视觉，下面有效果图，非常有视觉效果，可以使大家看着更舒服
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>层次感的瀑布流布局</title> <style> /* 样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 设置容器宽度 */ .container { column-count: 4; /* 设置列数 */ column-gap: 20px; /* 列间距 */ max-width: 1200px; /* 最大宽度 */ margin: 0 auto; /* 水平居中 */ } /* 设置每个项目的样式 */ .item { break-inside: avoid-column; /* 防止单个项目跨列 */ margin-bottom: 20px; /* 项目之间的间距 */ background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 5px; padding: 10px; height: 200px; /* 项目高度 */ width: calc(25% - 20px); /* 项目宽度，考虑到列间距 */ float: left; /* 为了兼容性，添加浮动 */ position: relative; /* 相对定位 */ } /* 添加层次感 */ .item:nth-child(odd) { transform: translateY(10px); /* 奇数项目向下位移 */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 添加阴影 */ } /* 响应式布局 */ @media (max-width: 768px) { .container { column-count: 2; /* 在较小的屏幕上，将列数设置为2 */ } .item { width: calc(50% - 20px); /* 在较小的屏幕上，调整宽度 */ } } </style> </head> <body> <div class="container"> <div class="item">项目 1</div> <div class="item">项目 2</div> <div class="item">项目 3</div> <div class="item">项目 4</div> <div class="item">项目 5</div> <div class="item">项目 6</div> <div class="item">项目 7</div> <div class="item">项目 8</div> <div class="item">项目 9</div> <div class="item">项目 10</div> <div class="item">项目 11</div> <div class="item">项目 12</div> <!-- 添加更多项目 --> </div> </body> </html>
