第一次写主要是跟着别人的代码写的。
参考代码和详细讲解 https://github.com/YeXiaoChao/PluginsFromJS/tree/master/Little%20Demos/waterfall
演示效果
代码：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
*{padding: 0; margin: 0;}
.box{
position: relative;
float: left;
}
.content{
padding: 2px;
border: 3px solid #aaa;
}
.content img{
width: 234px;
height: auto;
}
#container{
background: #eee none scroll repeat 0 0 ;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="content">
<img src="images/1.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/7.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/4.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/6.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/1.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/4.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/3.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/7.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/10.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/1.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/4.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/10.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/9.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/3.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/3.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/8.jpg">
</div>
</div>
</div>
<script type="text/javascript">
var arr = []; //获取盒子高度
function imgLocation(){
var boxWidth = $(".box:first").width(); //每张图片宽度
var num = Math.floor($(window).width() / boxWidth); //每排图片张数
var width = num * boxWidth + "px";
console.log("num=" + num);
$("#container").css("width",width);
$(".box").each(function(index,value){
var boxHeight = $(".box").eq(index).height(); //当前盒子高度
if(index < num){
arr[index] = boxHeight; //第一排图片
}else{
var minboxHeight = Math.min.apply(null,arr); //获取最小高度
var minboxIndex = $.inArray(minboxHeight, arr); //找到最小高度图片下标
$(value).css({
"position": "absolute",
"top": minboxHeight,
"left": $(".box").eq(minboxIndex).position().left
});
//重新计算高度
arr[minboxIndex] += $(".box").eq(index).height();
}
})
}
imgLocation();
function scrollSlide(){ //判断是否需要加载图片
var lastboxHeight = $(".box:last").offset().top + Math.floor($(".box:last").height() / 2);
return ($(document).scrollTop()+$(window).height() > lastboxHeight) ? true : false;
}
window.onscroll = function(){
if(scrollSlide()){
$.each(arr,function(index,value){ //每次滚动新增arr.length张图片
var box = $("<div></div>").addClass("box").appendTo($("#container"));
var content = $("<div></div>").addClass("content").appendTo(box);
var random = Math.ceil(Math.random()*10); //产生1-10间的随机数
$("<img></img>").attr("src","images/"+random+".jpg").appendTo(content);
})
imgLocation();
}
}
</script>
</body>
</html>图片素材：
点击打开百度云盘 密码：kilt