css的 column-count 可使布局变为瀑布流,但默认情况下,子元素会被分割开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>瀑布流布局</title>
<style>
.waterfall {
display: inline-block;
column-count: 6; /* 分割的列数 */
column-gap: 10px; /* 列的间隔 */
border: 1px solid red;
}
.item{
width: 100px;
height: 120px;
border: 1px solid;
/* 避免子元素被分割的 2种方式 */
/*page-break-inside: avoid;*/ /* 方式1 */
/*-webkit-column-break-inside: avoid;*/ /* 方式2 */
}
.item:nth-child(odd){
height: 80px;
}
</style>
</head>
<body>
<div class="waterfall">
<div class="item">
<img src="./img/set3/1.jpg" alt="1">
</div>
<div class="item">
<img src="./img/set3/2.jpg" alt="2">
</div>
<div class="item">
<img src="./img/set3/3.jpg" alt="3">
</div>
<div class="item">
<img src="./img/set3/4.jpg" alt="4">
</div>
<div class="item">
<img src="./img/set3/5.jpg" alt="5">
</div>
<div class="item">
<img src="./img/set3/6.jpg" alt="6">
</div>
<div class="item">
<img src="./img/set3/7.jpg" alt="7">
</div>
<div class="item">
<img src="./img/set3/8.jpg" alt="8">
</div>
<div class="item">
<img src="./img/set3/9.jpg" alt="9">
</div>
<div class="item">
<img src="./img/set3/1.jpg" alt="10">
</div>
<div class="item">
<img src="./img/set3/2.jpg" alt="11">
</div>
<div class="item">
<img src="./img/set3/3.jpg" alt="12">
</div>
<div class="item">
<img src="./img/set3/4.jpg" alt="13">
</div>
<div class="item">
<img src="./img/set3/5.jpg" alt="14">
</div>
<div class="item">
<img src="./img/set3/6.jpg" alt="15">
</div>
<div class="item">
<img src="./img/set3/7.jpg" alt="16">
</div>
<div class="item">
<img src="./img/set3/8.jpg" alt="17">
</div>
</div>
</body>
</html>
如下图,可以看到元素被分割开了。
解决方法:
为子元素加上样式:page-break-inside: avoid; 或 -webkit-column-break-inside: avoid; 即可。
效果如下图: