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%;
	}
}

效果如下（请忽略我劣质且重复的图片）：