User-Profile-Image
hankin
  • 5
  • 首页
  • 关于
  • 主题
  • 影视解析
  • 音乐
  • 归档
  • 留言
  • 分类
    • 后端
    • 前端
    • Python
    • PHP
    • javascript
    • GO
    • CSS
    • AI
  • 页面
    • 关于
    • 归档
    • 留言
    • 视频
      • 视频详情
    • 音乐
  • 友链
    • mango
    • 创造狮
    • 腾讯设计导航
    • coder gzh
    • 风信子博客
    • DIYgod
    • 若志奕鑫
    • 吾柯
    • 元气秋刀鱼
    • wordpress 大学
    • 守望轩-宁静雅致的小轩馆
    • 主题猫
    • 主题喵
    • kam
    • 大海看看
    • wp2
    • CrazyCodes
    • 枫瑞博客
Help?

Please contact us on our email for need any support

Support
Hankin
刷新页面会随机【个人信息流样式】
28文章    103获赞    49评论    6.7万+浏览
世界那么大,我想去看看。但钱包那么小,哪也去不了。所以,珍惜当下,享受生活。
28岁 IP: 杭州 家里蹲大学
  • 首页
  • 关于
  • 主题
  • 影视解析
  • 音乐
  • 归档
  • 留言
    首页   ›   前端   ›   CSS   ›   正文
CSS

真正的50行css代码实现响应式“瀑布流”布局

2024-07-10 10:17:28
948  0 1
<!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>
评论 (0)

点击这里取消回复。

欢迎您 游客  

Hankin
刷新页面会随机【个人信息流样式】
28文章    103获赞    49评论    6.7万+浏览
世界那么大,我想去看看。但钱包那么小,哪也去不了。所以,珍惜当下,享受生活。
28岁 IP: 杭州 家里蹲大学
  • 首页
  • 关于
  • 主题
  • 影视解析
  • 音乐
  • 归档
  • 留言
免费开源smarty_hankin v2.0重构版

wordpress版本:6.0+

PHP版本:7.0~8.0

gitee源码仓库地址:点击打开

github源码仓库地址:点击打开

最新源码地址:待更新

加QQ群入口:1018842166

WP开源主题 smarty_hankin

随机文章
微信公众号网页授权多域名解决方案(本地环境也可调用)
1年前
x-sign 算法
1年前
一款wordpress主题 hankin
2年前
PHP To Go 转型手记
12个月前
集成微信分享功能(微信朋友圈、微信朋友、QQ、微博等)
1年前
Copyright © 2025 网站备案号: 浙ICP备20002401号-4
smarty_hankin 主题. Designed by hankin
主页
页面
  • 关于
  • 归档
  • 留言
  • 视频
    • 视频详情
  • 音乐
博主
hanhanjun888@163.com
hanhanjun888@163.com 管理员
hankin
28 文章 37 评论 66766 浏览
测试
测试