个人技术分享
//通常 100vh 高度将解释调整后的高度，这就是为什么当浏览器的地址栏向下滑动时有时您会看到移动页面变得时髦的原因。
//对于不考虑 vh 单元中的滑动条的浏览器：地址栏的高度在浏览器中不会保持不变，所以我建议不要附加 -50px .
//尝试使用 window.innerheight 属性设置页面的高度（使用 javascript）。
function adjustHeight() {
// alert("宽度："+window.innerWidth+"高度："+ window.innerHeight)
var vh = window.innerHeight;
document.getElementById('messageContent').style.height = (vh - 50) + 'px'; // 假设地址栏高度大约为50px
}
window.addEventListener('resize', adjustHeight);
window.addEventListener('load', adjustHeight);
<!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>
暂无数据