<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
var arr=[]; //存放每一列的高度
var boxw=$(".box:first").outerWidth(true);
// width本身宽innerWidth width+padding outerWidth() width+padding+border outerWidth(true) width+padding +border+margin
var ww=$(window).width();
var col=Math.floor(ww/boxw);
$("#wrapper").width(col*boxw).css("margin","0 auto");
var pics=["images/37.jpg","images/38.jpg","images/39.jpg","images/40.jpg","images/41.jpg"]
$(window).scroll(function(){
if(isLoad()){
console.log("load...");
$.each(pics,function(i,ele){
var box = $("<div class='box'></div>");
$("<div class='pics'></div>").html('<img src="'+ele+'" />').appendTo(box);
box.appendTo($("#wrapper"));
})
waterWall();
}
})
waterWall();
function waterWall(){
$(".box").each(function(index){
if(index<col){ // 第一行
arr[index]=$(this).outerHeight();
}
else{ //从第二行开始的下标就大于col
var minH = Math.min.apply(null,arr); //找到最小高度的值
var minIndex=$.inArray(minH,arr); // indexOf //找到最小高度的值在数组中的索引
$(this).css({ //定位当前元素
position:'absolute',
//top:minH+"px", //top 设为最小值 minH
left:boxw+"px" //从哪漂过来
}).animate({
left:boxw*minIndex+"px", //关键 left值设为最小值的索引与一个box宽度的积
top:minH+"px" //设这个值会有高度上的动画
})
arr[minIndex]+=$(this).outerHeight();//刷新最小列的高度
}
});
}
function isLoad(){
var pos=$(".box:last").offset().top+Math.floor($(".box:last").outerHeight()/2);
var ws=$(window).height()+$(window).scrollTop();
if(pos<ws){
return true;
}
else{
return false;
}
}
});
</script>
</head>
<body>
<div id="wrapper" style="height:3000px">
<div class="box">
<div class="pics">
<img src="images/0.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/10.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/11.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/13.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/14.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="images/15.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
来源：https://www.cnblogs.com/mrluobiao/p/6773556.html