flex实现瀑布流布局

其他 2020-03-15 19:07:02 阅读次数: 0 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 实现瀑布流布局（display: flex）</title>
</head>
<style>
.g-container {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  -webkit-box-pack: justify;
          justify-content: space-between;
  overflow: hidden;
}

.g-queue {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  flex-basis: 24%;
}

.g-item {
  position: relative;
  width: 100%;
  margin: 2.5% 0;
}

.g-queue:nth-child(1) .g-item:nth-child(1) {
  height: 247px;
  background: #5a78a2;
}
.g-queue:nth-child(1) .g-item:nth-child(1)::after {
  content: "1";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(2) {
  height: 305px;
  background: #694271;
}
.g-queue:nth-child(1) .g-item:nth-child(2)::after {
  content: "2";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(3) {
  height: 180px;
  background: #923289;
}
.g-queue:nth-child(1) .g-item:nth-child(3)::after {
  content: "3";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(4) {
  height: 350px;
  background: #e42fa4;
}
.g-queue:nth-child(1) .g-item:nth-child(4)::after {
  content: "4";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(5) {
  height: 64px;
  background: #e719eb;
}
.g-queue:nth-child(1) .g-item:nth-child(5)::after {
  content: "5";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(6) {
  height: 160px;
  background: #68e35c;
}
.g-queue:nth-child(1) .g-item:nth-child(6)::after {
  content: "6";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(7) {
  height: 322px;
  background: #ad1428;
}
.g-queue:nth-child(1) .g-item:nth-child(7)::after {
  content: "7";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(8) {
  height: 219px;
  background: #46a371;
}
.g-queue:nth-child(1) .g-item:nth-child(8)::after {
  content: "8";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.g-queue:nth-child(2) .g-item:nth-child(1) {
  height: 269px;
  background: #9b23d2;
}
.g-queue:nth-child(2) .g-item:nth-child(1)::after {
  content: "1";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(2) {
  height: 99px;
  background: #0bbe0f;
}
.g-queue:nth-child(2) .g-item:nth-child(2)::after {
  content: "2";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(3) {
  height: 296px;
  background: #394487;
}
.g-queue:nth-child(2) .g-item:nth-child(3)::after {
  content: "3";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(4) {
  height: 305px;
  background: #49d312;
}
.g-queue:nth-child(2) .g-item:nth-child(4)::after {
  content: "4";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(5) {
  height: 250px;
  background: #33e252;
}
.g-queue:nth-child(2) .g-item:nth-child(5)::after {
  content: "5";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(6) {
  height: 174px;
  background: #bb3125;
}
.g-queue:nth-child(2) .g-item:nth-child(6)::after {
  content: "6";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(7) {
  height: 183px;
  background: #6a01cf;
}
.g-queue:nth-child(2) .g-item:nth-child(7)::after {
  content: "7";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(8) {
  height: 82px;
  background: #6e2fec;
}
.g-queue:nth-child(2) .g-item:nth-child(8)::after {
  content: "8";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.g-queue:nth-child(3) .g-item:nth-child(1) {
  height: 125px;
  background: #ec7436;
}
.g-queue:nth-child(3) .g-item:nth-child(1)::after {
  content: "1";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(2) {
  height: 120px;
  background: #c6f218;
}
.g-queue:nth-child(3) .g-item:nth-child(2)::after {
  content: "2";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(3) {
  height: 190px;
  background: #a162c1;
}
.g-queue:nth-child(3) .g-item:nth-child(3)::after {
  content: "3";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(4) {
  height: 216px;
  background: #b4d0a7;
}
.g-queue:nth-child(3) .g-item:nth-child(4)::after {
  content: "4";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(5) {
  height: 180px;
  background: #c56dad;
}
.g-queue:nth-child(3) .g-item:nth-child(5)::after {
  content: "5";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(6) {
  height: 349px;
  background: #aa692d;
}
.g-queue:nth-child(3) .g-item:nth-child(6)::after {
  content: "6";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(7) {
  height: 322px;
  background: #8cfec1;
}
.g-queue:nth-child(3) .g-item:nth-child(7)::after {
  content: "7";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(8) {
  height: 152px;
  background: #6eac89;
}
.g-queue:nth-child(3) .g-item:nth-child(8)::after {
  content: "8";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.g-queue:nth-child(4) .g-item:nth-child(1) {
  height: 341px;
  background: #01ee37;
}
.g-queue:nth-child(4) .g-item:nth-child(1)::after {
  content: "1";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(2) {
  height: 127px;
  background: #afb4d2;
}
.g-queue:nth-child(4) .g-item:nth-child(2)::after {
  content: "2";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(3) {
  height: 221px;
  background: #35d042;
}
.g-queue:nth-child(4) .g-item:nth-child(3)::after {
  content: "3";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(4) {
  height: 257px;
  background: #a2a7f1;
}
.g-queue:nth-child(4) .g-item:nth-child(4)::after {
  content: "4";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(5) {
  height: 276px;
  background: #2ffa2b;
}
.g-queue:nth-child(4) .g-item:nth-child(5)::after {
  content: "5";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(6) {
  height: 200px;
  background: #7fb5e2;
}
.g-queue:nth-child(4) .g-item:nth-child(6)::after {
  content: "6";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(7) {
  height: 223px;
  background: #764039;
}
.g-queue:nth-child(4) .g-item:nth-child(7)::after {
  content: "7";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(8) {
  height: 74px;
  background: #a3813a;
}
.g-queue:nth-child(4) .g-item:nth-child(8)::after {
  content: "8";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

</style>
<body>
  <!-- 本例使用 CSS flex 实现瀑布流布局 -->
<!-- 关键点，横向flex布局嵌套多列纵向flex布局，使用了 vw 进行自适应缩放 -->
<div class="g-container">
  <div class="g-queue">
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
  </div>
  <div class="g-queue">
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
  </div>
  <div class="g-queue">
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
  </div>
  <div class="g-queue">
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
  </div>
</div>
</body>
</html>
兔子零84
发布了155 篇原创文章 · 获赞 57 · 访问量 6万+
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43764814/article/details/104517330
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022