特效描述：基于jquery实现 自适应 照片瀑布流，基于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>
