效果(浏览器的宽度变化而变化)
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#gallery {
/* 把div元素中的文本划分成几列: */
column-count: 5;
/* 指定一个30像素的列之间的差距。 */
column-gap: 30px;
}
#gallery img {
width: 100%;
height: auto;
margin: 4% auto;
box-shadow: -3px 5px 15px #000;
cursor: pointer;
transition: all 0.2s;
}
@media (max-width:1200px) {
#gallery {
column-count: 4;
column-gap: 20px;
}
}
@media (max-width:800px) {
#gallery {
column-count: 3;
column-gap: 20px;
}
}
@media (max-width:600px) {
#gallery {
column-count: 2;
}
}
</style>
</head>
<body>
<div id="gallery" class="container-fluid">
<img src="./img//c.jpg" class="img-responsive">
<img src="./img//c.jpg" class="img-responsive">
<img src="./img//c.jpg" class="img-responsive">
<img src="./img//c.jpg" class="img-responsive">
<img src="./img//c.jpg" class="img-responsive">
<img src="./img//c.jpg" class="img-responsive">
<img src="./img//c.jpg" class="img-responsive">
<img src="./img//c.jpg" class="img-responsive">
<img src="./img//c.jpg" class="img-responsive">
<img src="./img//c.jpg" class="img-responsive">
<!-- 此处省略一亿张猫猫图片 -->
</div>
</body>
</html>