<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Jquery代码实现定位瀑布流布局特效</title>
<meta name="Keywords" content="Jquery代码实现定位瀑布流布局特效,Jquery插件,Jquery原创,Jquery资源,Jquery特效,js特效,div+css,源码搜藏" />
<meta name="description" content="源码搜藏是一个专门分享jquery资源、jquery插件、jquery特效的一个网站,完全开放源代码,把实际开发中应用最多、最实用的Jquery资源抽取出来再加以精心编排,让广大网友能以最短的时间、花最少的精力去真正掌握jQuery开发的知识。" />
<style type="text/css">
body { background:#f9f9f9; margin:0 auto; font:12px/24px tahoma, Helvetica, Arial; text-align:center; }
body,iframe,div,p,h1,h2,h3,h4,h5,h6,fieldset,ul,dl,dt,dd,form,input,button,textarea,select,i { margin:0px; padding:0px; font-weight:normal; }
ul { list-style:none; overflow:hidden; }
img { border:none; }
/* content */
.content { width:960px; margin:10px auto; }
/* case-list */
.case-list { position:relative; width:960px; }
.case-list li { display:block; position:absolute; border:1px solid #ddd; width:200px; padding:5px; border-radius:5px; background-color:#fff; }
.case-list li img { display:block; width:200px; border-radius:5px; }
</style>
</head>
<body>
<center>
<h2>Jquery代码实现定位瀑布流布局特效<br />
（<a href="http://www.codesocang.com" target="_blank">http://www.codesocang.com</a>）<br />
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=b8456df79a15d7f2738f6d98794ea09d0b6db0cede06c5dd18bc4c196e3163bd">官方网站学习交流QQ群<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" style="width:90px; height:22px;" alt="源码搜藏" width="90" height="22" title="源码搜藏"></a>
</h2>
</center>
<!-- content -->
<div class="content" id="content">
<ul class="case-list" id="case-list">
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
<li><img src="4.jpg" alt="" /></li>
<li><img src="5.jpg" alt="" /></li>
<li><img src="6.jpg" alt="" /></li>
<li><img src="7.jpg" alt="" /></li>
<li><img src="8.jpg" alt="" /></li>
<li><img src="9.jpg" alt="" /></li>
<li><img src="10.jpg" alt="" /></li>
<li><img src="11.jpg" alt="" /></li>
<li><img src="12.jpg" alt="" /></li>
<li><img src="13.jpg" alt="" /></li>
<li><img src="14.jpg" alt="" /></li>
<li><img src="15.jpg" alt="" /></li>
<li><img src="16.jpg" alt="" /></li>
<li><img src="17.jpg" alt="" /></li>
<li><img src="18.jpg" alt="" /></li>
<li><img src="19.jpg" alt="" /></li>
<li><img src="20.jpg" alt="" /></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var cases = $("#case-list li");
var case_h = [[],[],[],[]];
var sum = [0,0,0,0];
$.each(cases, function(i){
var m = i%4;
var step = Math.floor(i/4);
cases.eq(i).css("left", 220*m+"px");
case_h[m].push(cases.eq(i).height());
if(!step){
cases.eq(i).css("top", "0");
}else{
var num = 0;
for(var n=0; n<step; n++){
num += case_h[m][n] + 20;
}
cases.eq(i).css("top", num+"px");
}
});
$(case_h).each(function(i){
$(case_h[i]).each(function(j){
sum[i] += case_h[i][j];
});
});
cases.parent().css("height", sum.sort(function(a,b){return a<b?a:-1})[0]+100+"px");
});
</script>
</body>
</html>
瀑布流排版鼠标点击放大图片代码
jQuery可自定义高度图片瀑布流代码
jquery瀑布流排列样式代码
jQuery无限加载瀑布流插件masonry
jquery分类筛选动画瀑布流