flex布局实现瀑布流
必须是按列来排序，还得设置⾼度
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 1000px;
<!--
* @Descripttion:
* @Author: Pandora
* @Date:2021-11-1818:11:20
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin:4px;
font-family: Helvetica;
}
.masonry{
display: flex;
flex-direction: column;
flex-wrap: wrap;
height:1000px;
}
.item{
width:25%;
position: relative;
box-sizing: border-box;
padding:2px;
counter-increment: itemCount;
}
.item img{
width:100%;
height: auto;
display: block;
}
.item::after{
position: absolute;
height:30px;
line-height:30px;
width:30px;
text-align: center;
background-color: #000;
color: #fff;
top:10px;
left:10px;
content:counter(itemCount);
}
// 可以改变排序
.item:nth-child(4n+1){
order:1;
}
.item:nth-child(4n+2){
order:2;
}
.item:nth-child(4n+3){
order:3;
order:3;
}
.item:nth-child(4n){
order:1;
}
</style>
</head>
<body>
<div class="masonry">
<div class="item">
<img src="picsum.photos/360/260?random=1"> </div>
<div class="item">
<img src="picsum.photos/360/320?random=2"> </div>
<div class="item">
<img src="picsum.photos/360/320?random=16"> </div>
<div class="item">
<img src="picsum.photos/360/420?random=3"> </div>
<div class="item">
<img src="picsum.photos/360/420?random=4"> </div>
<div class="item">
<img src="picsum.photos/360/480?random=5"> </div>
<div class="item">
<img src="picsum.photos/360/500?random=16"> </div>
<div class="item">
<img src="picsum.photos/360/500?random=7"> </div>
<div class="item">
<img src="picsum.photos/360/400?random=8"> </div>
<div class="item">
<img src="picsum.photos/360/440?random=9"> </div>
<div class="item">
<img src="picsum.photos/360/420?random=10"> </div>flex布局详细讲解
<div class="item">
<img src="picsum.photos/360/500?random=11"> </div>
<div class="item">
<img src="picsum.photos/360/460?random=12"> </div>
<div class="item">
<img src="picsum.photos/360/480?random=13"> </div>
<div class="item">
<img src="picsum.photos/360/440?random=14"> </div>
<div class="item">
<img src="picsum.photos/360/420?random=15"> </div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。