CSS+HTML+插件製作響應式相冊

magnific-popup

magnific-popup.js下載地址
首先介紹一下使用到的一個插件：magnific-popup
使用方法：在head中引入.js文件和.css文件

<script src="https://cdn.bootcss.com/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/magnific-popup.js/1.1.0/magnific-popup.min.css">

$(".images").magnificPopup({
	delegate:'a',
	type:'image', //類型：圖片
	gallery:{
		enabled:true //相冊可上下切換
	}
});

效果圖如下：

HTML部分

<div class="wrap">
	<div class="container">
		<h1>我的相冊</h1>
		//畫直線
		<div class="line"></div>
		<div class="images">
			<a href="img/lis1.jpg" class="image">
				<img src="img/lis1.jpg" alt="" width="350px">
			</a>
			<a href="img/lis2.jpg" class="image">
				<img src="img/lis2.jpg" alt="" width="350px">
			</a>
			<a href="img/lis3.jpg" class="image">
				<img src="img/lis3.jpg" alt="" width="350px">
			</a>
			<a href="img/lis4.jpg" class="image">
				<img src="img/lis4.jpg" alt="" width="350px">
			</a>
			<a href="img/lis4.jpg" class="image">
				<img src="img/lis4.jpg" alt="" width="350px">
			</a>
			<a href="img/lis3.jpg" class="image">
				<img src="img/lis3.jpg" alt="" width="350px">
			</a>
			<a href="img/lis2.jpg" class="image">
				<img src="img/lis2.jpg" alt="" width="350px">
			</a>
			<a href="img/lis1.jpg" class="image">
				<img src="img/lis1.jpg" alt="" width="350px">
			</a>
		</div>
	</div>
</div>

CSS部分

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.wrap{
	width:100%;
	height: 100vh;
	padding: 50px 0;
	background: #f1f1f1;
}
.container{
	width: 100%;
	max-width: 1200px;
	margin: auto;
	padding: 0 20px;
}
.container h1{
	text-align: center;
}
.container .line{
	width: 180px;
	height: 4px;
	background-color: #333;
	margin: 50px auto;
}
.images{
	display: flex;
	flex-wrap: wrap-reverse;
	justify-content: center;
}
.image{
	flex: 25%;
	overflow: hidden;
}
.image img{
	width: 100%;
	height: 100%;
	animation: 0.4s;
}
.image:hover img{
	transform: scale(1.5) rotate(15deg);
}

使用transform屬性：讓圖片懸浮式有放大（scale），旋轉（rotate）的動畫效果；
按照一般相冊顯示圖片的順序：使用flex-wrap: wrap-reverse;使圖片倒序顯示；

響應式：

head中使用meta標籤

<!--放大頁面到設備合適的分辨率-->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

@media screen and (max-width:1050px){
	.image{
		flex: 33.33%;
	}
}
@media screen and (max-width:800px){
	.image{
		flex: 50%;
	}
}
@media screen and (max-width:400px){
	.image{
		flex: 100%;
	}
}

效果如下（請忽略我劣質且重複的圖片）：