基于jquery实现自适应照片瀑布流代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bigimg.css" type="text/css"/>
<link rel="stylesheet" href="css/pubu.css" type="text/css" media='screen'/>

2. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/notification.js"></script>
<script type="text/javascript" src="js/bigimg.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js" ></script>
<script type="text/javascript" src="js/blocksit.min.js"></script>
<script type="text/javascript" src="js/pubu.js"></script>

3. HTML代码

<div style="color:green;text-align:center;font-size:25px;margin-top:30px;">点击图片可浏览大图</div>
<!--瀑布流  start-->
<div id="wrapper">
	<div id="container" style="width:995px;">
		<div class="grid">
			<div class="imgholder">
				<img class="lazy thumb_photo" title="1" src="images/pixel.gif" data-original="images/1.jpg" width="225" />
			</div>
		</div>
		<div class="grid">
			<div class="imgholder">
				<img class="lazy thumb_photo" title="2" src="images/pixel.gif" data-original="images/2.jpg" width="225" />
			</div>
		</div>
		<div class="grid">
			<div class="imgholder">
				<img class="lazy thumb_photo" title="3" src="images/pixel.gif" data-original="images/3.jpg" width="225" />
			</div>
		</div>
		<div class="grid">
			<div class="imgholder">
				<img class="lazy thumb_photo" title="4" src="images/pixel.gif" data-original="images/4.jpg" width="225" />
			</div>
		</div>
		<div class="grid">
			<div class="imgholder">
				<img class="lazy thumb_photo" title="5" src="images/pixel.gif" data-original="images/5.jpg" width="225" />
			</div>
		</div>
		<div class="grid">
			<div class="imgholder">
				<img class="lazy thumb_photo" title="6" src="images/pixel.gif" data-original="images/6.jpg" width="225" />
			</div>
		</div>
		<div class="grid">
			<div class="imgholder">
				<img class="lazy thumb_photo" title="7" src="images/pixel.gif" data-original="images/7.jpg" width="225" />
			</div>
		</div>
		<div class="grid">
			<div class="imgholder">
				<img class="lazy thumb_photo" title="8" src="images/pixel.gif" data-original="images/8.jpg" width="225" />
			</div>
		</div>
		<div class="grid">
			<div class="imgholder">
				<img class="lazy thumb_photo" title="9" src="images/pixel.gif" data-original="images/9.jpg" width="225" />
			</div>
		</div>
		<div class="grid">
			<div class="imgholder">
				<img class="lazy thumb_photo" title="10" src="images/pixel.gif" data-original="images/10.jpg" width="225" />
			</div>
		</div>
		<div class="grid">
			<div class="imgholder">
				<img class="lazy thumb_photo" title="11" src="images/pixel.gif" data-original="images/11.jpg" width="225" />
			</div>
		</div>
		<div class="grid">
			<div class="imgholder">
				<img class="lazy thumb_photo" title="12" src="images/pixel.gif" data-original="images/12.jpg" width="225" />
			</div>
		</div>
		<div class="grid">
			<div class="imgholder">
				<img class="lazy thumb_photo" title="13" src="images/pixel.gif" data-original="images/13.jpg" width="225" />
			</div>
		</div>
	</div>
</div>
<!--瀑布流 end-->
<div class="clear"></div>
<div class="load_more">
	<span class="load_more_text">加载更多...</span>
</div>
<!--大图弹出层 start-->
<div class="container">
	<div class="close_div">
		<img src="images/closelabel.gif" class="close_pop" title="关闭" alt="关闭" style="cursor:pointer">　
	</div>
	<!-- 代码 开始 -->
	<div class="content">
		<span style="display:none"><img src="images/load.gif" /></span>
		<div class="left"></div>
		<div class="right"></div>
		<img class="img" src="images/1.jpg">
		<img class="img" src="images/2.jpg">
		<img class="img" src="images/3.jpg">
		<img class="img" src="images/4.jpg">
		<img class="img" src="images/5.jpg">
		<img class="img" src="images/6.jpg">
		<img class="img" src="images/7.jpg">
		<img class="img" src="images/8.jpg">
		<img class="img" src="images/9.jpg">
		<img class="img" src="images/10.jpg">
		<img class="img" src="images/11.jpg">
		<img class="img" src="images/12.jpg">
		<img class="img" src="images/13.jpg">
	</div>
	<div class="bottom">共 <span id="img_count">x</span> 张 / 第 <span id="xz">x</span> 张</div>
	<!-- 代码 结束 -->
</div><!--end-->
<script type="text/javascript">
$(document).ready(function(){
	var count = 14;
	// 点击加载更多
	$('.load_more').click(function(){
		var html = "";
		var img = '';
		for(var i = count; i < count+13; i++){
			var n = Math.round(Math.random(1)*13);
			var src = 'images/'+n+'.jpg';
			html = html + "<div class='grid'>"+
				"<div class='imgholder'>"+
				"<img class='lazy thumb_photo' title='"+i+"' src='images/pixel.gif' data-original='"+src+"' width='225' onclick='seeBig(this)'/>"+
				"</div>"+
				"</div>";
			img = img + "<img class='img' src='"+src+"'>";
		}
		count = count + 13;
		$('#container').append(html);
		$('.content').append(img);
		$('#container').BlocksIt({
			numOfCol:4,  //每行显示数
			offsetX: 5,  //图片的间隔
			offsetY: 5   //图片的间隔
		});
		$("img.lazy").lazyload();
	});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>