个人技术分享
真正的50行css代码实现响应式“瀑布流”布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<title>瀑布流</title>
<style>
:root {--color1: #a3d9a5;--color2: #f6b93b;--color3: #38ada9;--color4: #e55039;--color5: #1e3799;--color6: #6a89cc;--color7: #f8c291;--color8: #b71540;}
.lists .item:nth-child(odd) {background-color: var(--color1);}
.lists .item:nth-child(even) {background-color: var(--color2);}
.lists .item:nth-child(3n) {background-color: var(--color3);}
.lists .item:nth-child(4n) {background-color: var(--color4);}
.lists .item:nth-child(5n) {background-color: var(--color5);}
.lists .item:nth-child(6n) {background-color: var(--color6);}
.lists .item:nth-child(7n) {background-color: var(--color7);}
.lists .item:nth-child(8n) {background-color: var(--color8);}
.lists {width: 1200px;margin: 0 auto;column-count: 4;column-gap: 10px;transition: column-count 0.3s ease-in-out;}
.lists .item {height: 160px;margin-bottom: 10px;break-inside: avoid;color: #000000;text-align: center;font-size: 30px;transition: height 0.3s ease-in-out;}
/* 更多的高度和选择器组合 */
.lists .item:nth-child(3n+1) { height: 200px; }
.lists .item:nth-child(4n+1) { height: 250px; }
.lists .item:nth-child(5n+1) { height: 180px; }
.lists .item:nth-child(6n+1) { height: 280px; }
.lists .item:nth-child(7n+1) { height: 220px; }
.lists .item:nth-child(8n+1) { height: 300px; }
.lists .item:nth-child(9n+1) { height: 230px; }
.lists .item:nth-child(10n+1) { height: 260px; }
@media (max-width: 992px) {
.lists {width: auto;padding: 10px;box-sizing: border-box;column-count: 3;column-gap: 10px;}
.lists .item {break-inside: avoid;width: auto;text-align: center;margin-bottom: 10px;}
/* 在较小屏幕下适应不同的高度 */
.lists .item:nth-child(3n+1) { height: 220px; }
.lists .item:nth-child(4n+1) { height: 180px; }
.lists .item:nth-child(5n+1) { height: 250px; }
.lists .item:nth-child(6n+1) { height: 200px; }
}
@media (max-width: 768px) {
.lists {width: auto;padding: 10px;box-sizing: border-box;column-count: 2;column-gap: 10px;}
.lists .item {break-inside: avoid;width: auto;height: 200px;line-height: 200px;text-align: center;margin-bottom: 10px;}
.lists .item:nth-child(2n+1) {height: 240px;}
.lists .item:nth-child(3n+1) {height: 320px;}
}
</style>
</head>
<body>
<div class="lists"><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 class="item">13</div><div class="item">14</div><div class="item">15</div><div class="item">16</div>
</div>
</body>
</html>
个人技术分享
暂无数据