index.html

<!DOCTYPE html lang="zh-cmn-Hans">
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">	
	<meta name="keywords" content="your keywords">
	<meta name="description" content="your description">
	<title>h5-preview-image</title>
	<link rel="stylesheet" href="dist/css/preview-image.min.css"/>
	<script src="js/jquery.min.js"></script>
	<script src="dist/js/preview-image.min.js"></script>	
	<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		ul{
			list-style: none;
		}
		#preview{
			margin: 20px auto;
		}
		img{
			max-width: 100%;
		}
		#preview ul{
			overflow: hidden;
		}
		#preview li{
			float: left;
			width: 23%;			
			margin: 1%;
		}
	</style>
</head>
<body>	
	<p style="margin: 20px;">请在手机中打开，点击图片预览</p>
	<div id="preview">
		<ul>
			<li>
				<img src="images/1.jpg" alt="picture 1">
			</li>
			<li>
				<img src="images/2.jpg" alt="picture 2">
			</li>
			<li>
				<img src="images/3.jpg" alt="picture 3">
			</li>
			<li>
				<img src="images/4.jpg" alt="picture 4">
			</li>
		<ul>
	</div>

	<script>
		$(function(){
			$('#preview').preview();
		})
	</script>

</body>
</html>