photoShow
/
equalHeight.html

<!doctype html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
	<title>图片展示网站</title>
	<link rel="stylesheet" href="masonry.css">
	<link rel="stylesheet" href="verticalShowcase.css">
	<link rel="stylesheet" href="imageBox.css">
	<link rel="stylesheet" href="bookReview.css">
	<link rel="stylesheet" href="page.css">
	<link rel="stylesheet" href="style.css">
	<style>
		.banner{width: 100%;z-index: 19;position: relative;margin-top: 0;}
		/*ipad:1024x768 横向*/
		@media (max-width: 1024px) and (orientation: landscape) {
		}
		/*ipad:1024x768 竖向*/
		@media (max-width: 768px) and (orientation: portrait) {
			#masonry .photoContainer .photoList{list-style: none;margin: 0;padding-left: 0;padding:20px;}
			#masonry .photoContainer .photoList li{display:inline;margin-bottom: 20px;width: 150px;}
		}
		/*普通手机 320x480*/
		@media (max-width: 320px) {
		}

		/*850*/
		@media (max-width: 850px) {
		}

		/*768*/
		@media (max-width: 768px) {
			#masonry .photoContainer .photoList{list-style: none;margin: 0;padding-left: 0;padding:20px;}
			#masonry .photoContainer .photoList li{display:inline;margin-bottom: 20px;width: 163px;}
		}

		/*iphone 640x960*/
		@media (max-width: 640px) {
			header {height: 30px;}
			header .mainlogo{display: none;}
			header .logo2{display: block;height: 20px;width: 31px;top: 5px;left: 50%;-webkit-transform:translateX(-50%);position: absolute;}
			.navigator{display: none;}
			.navigatorImg{display: block;}
			#masonry .photoContainer .photoList{list-style: none;margin: 0;padding-left: 0;padding:10px;}
			#masonry .photoContainer .photoList li{display:inline;margin-bottom: 20px;width: 188px;}
		}
	</style>
	<script src="modernizr.custom.js"></script>
</head>
<body>
	<header>
		<a href="index.html" class="mainlogo">
			<img src="logo.png" alt="">
		</a>
		<nav class="navigator">
			<ul>
				<li><a href="index.html">首页</a></li>
				<li><a href="equalHeight.html">布局1</a></li>
				<li><a href="masonry.html">布局2</a></li>
				<li><a href="imageBox.html">布局3</a></li>
				<li><a href="verticalShowcase.html">布局4</a></li>
				<li><a href="bookReview.html">布局5</a></li>
			</ul>
		</nav>
		<a href="index.html" class="logo2">
			<img src="logo2.png" alt="">
		</a>
		<div class="navigatorImg">
			<a href="javascript:void(0);" class="logo">
				<img src="icon-hamburger.png" alt="">
			</a>
			<ul class="navigatorList hide">
				<li><a href="index.html">首页</a></li>
				<li><a href="equalHeight.html">布局1</a></li>
				<li><a href="masonry.html">布局2</a></li>
				<li><a href="imageBox.html">布局3</a></li>
				<li><a href="verticalShowcase.html">布局4</a></li>
				<li><a href="bookReview.html">布局5</a></li>
			</ul>
		</div>
	</header>

	<article class="banner">
		<img src="layout1.png" alt="" class="layout">
	</article>

	<article class="container">
		<div id="equalHeight" class="layout">
			<div class="imgList">
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num"></span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num"></span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test1.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num"></span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num"></span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test2.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num"></span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num"></span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test4.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num"></span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num"></span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test1.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num"></span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num"></span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test6.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num"></span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num"></span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test3.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num"></span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num"></span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test4.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num"></span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num"></span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test2.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num">33</span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num">55</span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test6.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num">33</span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num">55</span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test1.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num"></span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num"></span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test1.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num"></span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num"></span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test4.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num">33</span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num">55</span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test5.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num"></span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num"></span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test3.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num">33</span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num">55</span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test6.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num">33</span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num">55</span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test1.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num"></span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num"></span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test3.jpg" />
					</a>
				</div>
				<div class="imgItem">
					<div class="imgItem-cover">
						<div class="imgItem-descript textoverflow">
							<p class="imgItem-title">这颜色真的很正</p>
							<small class="imgItem-time">2013-7-29</small>
						</div>
						<div class="imgItem-opt">
							<div class="imgItem-comment">
								<i class="comment-btn" onselectstart="return false"></i>
								<span class="comment-num"></span>
							</div>
							<div class="imgItem-praise">
								<i class="praise-btn" onselectstart="return false"></i>
								<span class="praise-num"></span>
							</div>
						</div>
					</div>
					<a href="">
						<img src="images/test4.jpg" />
					</a>
				</div>
			</div>
		</div>
	</article>

	<footer>
		<p>基于HTML5的图片浏览器设计与实现／陈伟健</p>
	</footer>
	<script src="jquery-1.11.0.min.js"></script>
	<!-- <script src="bookblock.min.js"></script> -->
	<!-- <script src="classie.js"></script> -->
	<!-- <script src="bookshelf.js"></script> -->
	<!-- <script src="jquery.masonry.js"></script> -->
	<!-- <script src="jquery.kinetic.js"></script> -->
	<!-- <script src="slider.js"></script> -->
	<script src="base.js"></script>
	<script src="photo.js"></script>
</body>
</html>