css3实现瀑布流图片特效

忘是亡心i 2022-11-03 11:52 184阅读 0赞

htmL:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<link rel="stylesheet" type="text/css" href="css/pubuliu.1.css"/>
    	</head>
    	<body>
    		<div>
    			<div  class="masonry">
    				<div class="item">
    					<img src="imgs/1.jpg" alt="">
    				</div>
    				 <div class="item">
    				 	<img src="imgs/2.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/3.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/4.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/5.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/6.jpg" alt="">
    				 </div>
    				 <div class="item">
    				 	<img src="imgs/7.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/8.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/9.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/10.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/11.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/12.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/13.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/14.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/15.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/16.jpg" alt="">
    				 </div> 
    				 <div class="item">
    				 	<img src="imgs/17.jpg" alt="">
    				 </div> 
    			</div>
    		</div>
    	</body>
    </html>

css3:

body{ 
    	margin: 4px;
    	font-family: helvetica;
    }
    .masonry{ 
    	display: flex;
    	flex-direction: column;
    	flex-wrap: wrap;
    	height: 1000px;
    	 
    }
    .item{ 
    	 position: relative;
    	 width: 25%;
    	 padding: 2px;
    	 box-sizing: border-box ;
    	 counter-increment: item-counter;
    }
    .item img{ 
    	display: block;
    	width: 100%;
    	height: auto;
    }
    
    .item::after{ 
    	position: absolute;
    	display: block;
    	top: 2px;
    	left: 2px;
    	width: 24px;
    	height: 24px;
    	text-align: center;
    	line-height: 24px;
    	background-color: #000;
    	color: #fff;
    	content: counter(item-counter);
    }
    .item:nth-child(4n+1){ 
    	order: 1;
    }
    .item:nth-child(4n+2){ 
    	order: 2;
    }
    .item:nth-child(4n+3){ 
    	order: 3;
    }
    .item:nth-child(4n){ 
    	order: 4;
    }

css3 第二种：

body{ 
    	margin: 4px;
    	font-family: helvetica;
    }
    .masonry{ 
    	column-count: 2;
    	column-gap: 0;
    }
    .item{ 
    	padding: 2px;
    	position: relative;
    	counter-increment: item-counter;
    }
    .item img{ 
    	display: block;
    	width: 100%;
    	height: auto;
    }
    
    .item::after{ 
    	position: absolute;
    	display: block;
    	top: 2px;
    	left: 2px;
    	width: 24px;
    	height: 24px;
    	text-align: center;
    	line-height: 24px;
    	background-color: #000;
    	color: #fff;
    	content: counter(item-counter);
    }

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221024/e0ed6f0bd8ad4ede948906b29192f777.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221024/f4fb7e0419e84b7ba7b190e93dd09fd9.png