静态html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@charset "utf-8";
*{padding: 0;margin: 0;}
#main{position: relative;}
.box{padding: 15px 0 0 15px;float: left;}
.pic{padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;}
.pic img{ 165px;height: auto;}
</style>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/pubuliu.js" ></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="img/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/3.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/4.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/5.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/6.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/7.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/8.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/9.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/12.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/13.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/14.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/15.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/16.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/17.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/18.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/19.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/3.jpg"/>
</div>
</div>
</div>
</body>
</html>
jq代码：
//页面加载，触发load事件后执行waterfall函数
$(window).on("load",function(){
waterfall();
// 创建图片的数组
var dataInt={"date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"}]}
// 鼠标滚动进行判断加载
$(window).on("scroll",function(){
// 是否触发加载，触发后执行函数
if(checkScrollSlide){
// 新加载的图片传递参数
$.each(dataInt.date,function(key,value){
var oBox=$("<div>").addClass("box").appendTo($("#main"));
var oPic=$("<div>").addClass("pic").appendTo($(oBox));
var oImg=$("<img>").attr("src","img/"+$(value).
attr("src")).appendTo($(oPic));
})
// 再次调用排序函数
waterfall();
}
})
})
function waterfall(){
// 包含选择器，必须用大于号的选择器，空格会将div的所有后代都找出来。所以用大于号，选择一级div
var $boxs=$("#main>div");
// 取出每一列的宽度，取出其中一个的宽度即可，outerwidth提取的值会将包括padding，border在内的值都提取出来
var w=$boxs.eq(0).outerWidth();
// 获取当前的列数，就是浏览器当前的宽度除以某一列的宽度即为当前的列数
var cols=Math.floor($(window).width()/w);
// 设置外部容器div的宽，和样式居中
$("#main").width(w*cols).css("margin","0 auto");
var hArr=[];
// 给每个$boxs绑定each事件，代替了js当中的for循环
$boxs.each(function(index,value){
// 定义h为当前$boxs的高度,outerHeight与outerwidth属性相同
var h=$boxs.eq(index).outerHeight();
// 当
if(index<cols){
hArr[index]=h
}else{
// 获取最小高度的图片的高度以及它句页面左侧的距离
var minH=Math.min.apply(null,hArr);
var minHIndex=$.inArray(minH,hArr)
// 给下一个图片设定位置
$(value).css({
"position":"absolute",
"top":minH+"px",
"left":minHIndex*w+"px"
})
// 将超过第一行的所有的图片都很据前一行最小的高度来定义位置
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
}
})
}
function checkScrollSlide(){
// 找到最后一个div
var $lastBox=$("#main>div").last();
// 最后一个div的高度
var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
// 页面滚动条的高度
var scrollTop=$(window).scrollTop();
// 页面的高
var documentH=$(window).height();
// 最后一个div如果小于滚动条+页面的高度，就返回一个true
return (lastBoxDis<scrollTop+documentH)?true:false;
}