纯 CSS 实现瀑布流布局的方法

这种方式兼容性不是很好，全部支持需要些时间，但是目前是可以使用 css 写出来的

display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-template-rows: masonry;
1
2
3
4

全部的 css

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-template-rows: masonry;
}
img {
  display: block;
  width: 100%;
}
1
2
3
4
5
6
7
8
9
10

HTML 基础布局

<body>
  <div class="container">
    <img src="images/0.jpg" alt="" />
    <img src="images/1.jpg" alt="" />
    <img src="images/2.jpg" alt="" />
    <img src="images/3.jpg" alt="" />
    <img src="images/4.jpg" alt="" />
    <img src="images/5.jpg" alt="" />
    <img src="images/6.jpg" alt="" />
    <img src="images/7.jpg" alt="" />
    <img src="images/8.jpg" alt="" />
    <img src="images/9.jpg" alt="" />
    <img src="images/10.jpg" alt="" />
    <img src="images/11.jpg" alt="" />
    <img src="images/12.jpg" alt="" />
    <img src="images/13.jpg" alt="" />
    <img src="images/14.jpg" alt="" />
    <img src="images/15.jpg" alt="" />
    <img src="images/16.jpg" alt="" />
    <img src="images/17.jpg" alt="" />
    <img src="images/18.jpg" alt="" />
  div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这里插入图片描述

相关阅读:
酒水销售系统
ubuntu安装ROS rosdep init rosdep update报错，完美解决方案!
SpringBoot项目整合Redis，Rabbitmq发送、消费、存储邮件
[附源码]Python计算机毕业设计宠物领养系统
合并 K 个升序链表
WSN final fighting 12.05
[C]qsort的使用和实现
CentOS虚拟机装完了，不能粘贴window命令行？不能上网？
06.sqlite3学习——DQL（数据查询）（全）
挠场的科学丨三、特斯拉所来不及知道的「挠场」

原文地址：https://blog.csdn.net/weixin_46533577/article/details/133814256