<!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>简单CSS定位瀑布流实现方法</title>
<style type=
"text/css"
>
body , html {
height: 100%;
}
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 {margin:10px auto; }
.
case
-list { margin:0 auto; }
.
case
-list li { display:block; position:absolute;padding:5px 0; border:1px solid #ddd;border-radius:5px; background-color:#fff;}
.
case
-list li img { display:block;border-radius:5px;margin-left:5px; }
</style>
</head>
<body>
<!-- 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=
"5.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 type=
"text/javascript"
src=
"jquery-1.8.3.min.js"
></script>
<script type=
"text/javascript"
>
window.onload =
function
(){
var
windowW=$(window).width();
var
imgW=$(
"#case-list li>img"
).width();
var
hNum=parseInt(windowW/imgW);
var
cases = $(
"#case-list li"
);
var
case_h =
new
Array();
for
(
var
j=0;j<hNum;j++){
case_h[j] =
new
Array();
}
$.each(cases,
function
(i){
var
hNum=parseInt(windowW/imgW);
var
m = i%hNum;
case_h[m].push(cases.eq(i).height());
var
step = Math.
floor
(i/hNum);
cases.eq(i).css(
"left"
, (imgW + 10)*m+
"px"
);
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"
);
}
});
}
</script>
</body>
</html>