<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
*{margin: 0;padding: 0;}
ul{list-style:none;}
ul li{300px;border:1px solid #CCC;padding:10px;position:absolute;transition:all 0.4s;}
ul li h3{text-align:center;color:green;line-height:40px;}
ul li img{300px;}
</style>
</head>
<body>
<ul>
<li><img src="images/1.jpg" alt=""><h3>1</h3></li>
<li><img src="images/2.jpg" alt=""><h3>2</h3></li>
<li><img src="images/3.jpg" alt=""><h3>3</h3></li>
<li><img src="images/4.jpg" alt=""><h3>4</h3></li>
<li><img src="images/5.jpg" alt=""><h3>5</h3></li>
<li><img src="images/6.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/7.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/8.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/9.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/10.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/11.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/12.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/13.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/14.png" alt=""><h3>9527</h3></li>
<li><img src="images/15.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/16.png" alt=""><h3>9527</h3></li>
<li><img src="images/1.jpg" alt=""><h3>1</h3></li>
<li><img src="images/2.jpg" alt=""><h3>2</h3></li>
<li><img src="images/3.jpg" alt=""><h3>3</h3></li>
<li><img src="images/4.jpg" alt=""><h3>4</h3></li>
<li><img src="images/5.jpg" alt=""><h3>5</h3></li>
<li><img src="images/6.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/7.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/8.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/9.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/10.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/11.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/12.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/13.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/14.png" alt=""><h3>9527</h3></li>
<li><img src="images/15.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/16.png" alt=""><h3>9527</h3></li>
</ul>
<script src="jquery-1.8.3/jquery.min.js"></script>
<script>
function run(){
// 获取所有的 li
var liObj = $('li');
// 默认的 margin 容器的边距
var margin = 10;
// 每一个 li 标签 要占的宽度。
var liWidth = liObj[0].offsetWidth+margin;
// 一排可以显示 li 的 数量。
var num = parseInt(document.documentElement.offsetWidth/liWidth);
// 定义一个空数组 来 装每个 li 的 高度。
var liH = [];
for(var i=0;i<liObj.length;i++){
if(i<num){
// 第一排的 li
liObj.eq(i).css({top:'0',left:i*liWidth})
liH[i] = liObj[i].offsetHeight;
}else{
// 谁的高度最小。
var minH = Math.min.apply(null,liH);
// 我要的是最小高度的位置。
var minKey = getKey(liH,minH);
// 摆放 非 第一排的 li
liObj.eq(i).css({top:minH+margin,left:minKey*liWidth});
// 更新 上以次 存 高度的数组。
liH[minKey] += liObj[i].offsetHeight+margin;
}
// 给每一个 h3 添加编号。
$('h3').eq(i).html('编号：'+i);
}
}
// 等待 所有的 dom 加载完成
// 因为 我们要等图片加载完成，才能获取图片的大小
window.onload = function(){
run();
}
// 通过数组的 value 获取 key
function getKey(obj,value){
for(var i=0;i<obj.length;i++){
if(value==obj[i]){return i}
}
}
// alert(liObj);
// 浏览器大小 改变时 就会 执行这个函数。
window.onresize = function(){
run();
}
</script>
</body>
</html>