瀑布流
一个页面有多个列，每一列多有等宽度的信息，当向下滑动滚动条时，快到底时，每一列开始追加新的信息，就像腾讯微博中的效果一样
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#main{
width:100%;
overflow: hidden;
}
#main .list{
width:300px;
border: 3px solid #666;
float: left;
margin: 0 20px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
function zhuijia(){
var num=Math.ceil(Math.random()*5);//随机数1-5
var min_div=0;//记录最小高度的列
$('#main .list').each(function(i){//循环，获得高度最小的列，i表示序号
if($('#main .list').eq(i).height()<$('#main .list').eq(min_div).height()){//如果高度小于min_div号的高度，将这个列的序号赋值给min_div
min_div=i;
}
})
$('#main .list').eq(min_div).append('<img src="../img2/'+num+'.jpg"/>')//王高度最小的列添加随机图片
}
$(window).scroll(function(){//窗口滚动条滚动事件
var bottom=$('#main').height()-$(window).height()-$(document).scrollTop();//main高度-可视区高度-已滚上去的高度
if(bottom<200){//当快要到底时，开始追加，追加多个，防止有些图片太矮，撑不开
zhuijia();
zhuijia();
zhuijia();
zhuijia();
zhuijia();
}
})
})
</script>
</head>
<body>
<div id="main">
<div class="list">
<img src="../img2/1.jpg" alt="">
<img src="../img2/4.jpg" alt="">
<img src="../img2/1.jpg" alt="">
<img src="../img2/2.jpg" alt="">
<img src="../img2/1.jpg" alt="">
<img src="../img2/1.jpg" alt="">
</div>
<div class="list">
<img src="../img2/5.jpg" alt="">
<img src="../img2/1.jpg" alt="">
<img src="../img2/3.jpg" alt="">
<img src="../img2/1.jpg" alt="">
<img src="../img2/2.jpg" alt="">
<img src="../img2/1.jpg" alt="">
</div>
<div class="list">
<img src="../img2/1.jpg" alt="">
<img src="../img2/2.jpg" alt="">
<img src="../img2/1.jpg" alt="">
<img src="../img2/5.jpg" alt="">
<img src="../img2/1.jpg" alt="">
<img src="../img2/1.jpg" alt="">
</div>
</div>
</body>
</html>
