知识点：
1、通过多层次定义json数据
var json={"data":[{"src","image/1.jpg"},{"src","image/1.jpg"},{"src","image/1.jpg"},{"src","image/1.jpg"}]}
json里面定义对象，对象用数组来组织，数组的内容是对象
2、获取多层次对象的内容
$.each(json.data,function(index,value){
console.log($(value).attr("src")) //通过$.each(data,function(index,value))来通过value获得data中的数据
})
获取value中的值，value代表了{"src","image/1.jpg"}，通过吧value转换成jquery对象，$(value).attr("src");
3、创建新的对象，添加到现有结构中
（1）通过$("<div>")的方式创建html标签，然后通过链式操作，$("<div>").addClass("div").appendTo($("<body>"))
4、当前容器高度
$(document).height();
当前滚动的高度
$(window).scrollTop();
5、通过eq定位
通过$("").eq(index)定位
6、通过apply来改变this
Math.min.apply(null,[])
7、通过$.inArray(obj,[])来判断obj在数组中的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
position: relative;
float:left;
}
.content{
padding: 10px;
border: 1px solid black;
-webkit-box-shadow: 5px 0 0 2px #555555;
-moz-box-shadow: 5px 0 0 2px #555555;
box-shadow: 5px 0 0 2px #555555;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.content img{
height: auto;
width: 300px;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="content"><img src="image/1.jpg" alt="1"/></div>
</div>
<div class="box">
<div class="content"><img src="image/2.jpg" alt="2"/></div>
</div>
<div class="box">
<div class="content"><img src="image/3.jpg" alt="3"/></div>
</div>
<div class="box">
<div class="content"><img src="image/4.jpg" alt="4"/></div>
</div>
<div class="box">
<div class="content"><img src="image/5.jpg" alt="5"/></div>
</div>
<div class="box">
<div class="content"><img src="image/6.jpg" alt="6"/></div>
</div>
<div class="box">
<div class="content"><img src="image/7.jpg" alt="6"/></div>
</div>
<div class="box">
<div class="content"><img src="image/8.jpg" alt="7"/></div>
</div>
<div class="box">
<div class="content"><img src="image/9.jpg" alt="8"/></div>
</div>
<div class="box">
<div class="content"><img src="image/10.jpg" alt="10"/></div>
</div>
<div class="box">
<div class="content"><img src="image/1.jpg" alt="1"/></div>
</div>
<div class="box">
<div class="content"><img src="image/2.jpg" alt="2"/></div>
</div>
<div class="box">
<div class="content"><img src="image/3.jpg" alt="3"/></div>
</div>
<div class="box">
<div class="content"><img src="image/4.jpg" alt="4"/></div>
</div>
<div class="box">
<div class="content"><img src="image/5.jpg" alt="5"/></div>
</div>
<div class="box">
<div class="content"><img src="image/6.jpg" alt="6"/></div>
</div>
<div class="box">
<div class="content"><img src="image/7.jpg" alt="6"/></div>
</div>
<div class="box">
<div class="content"><img src="image/8.jpg" alt="7"/></div>
</div>
<div class="box">
<div class="content"><img src="image/9.jpg" alt="8"/></div>
</div>
<div class="box">
<div class="content"><img src="image/10.jpg" alt="10"/></div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(window).on("load",function(){
imgLocation();
/*用json来模拟数据加载*/
var dataImg={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"}]};
window.onscroll=function(){
$.each(dataImg.data,function(index,value){
if(scrollside()){
var box=$("<div>").addClass("box").appendTo($("#container"));
var content=$("<div>").addClass("content").appendTo(box);
/*如何得到json中的数据，通过 "image/"+$(value).attr("src")*/
$("<img>").attr("src","image/"+$(value).attr("src")).appendTo(content);
console.log("image/"+$(value).attr("src"));
imgLocation();
}
});
}
});
});
/*滚动加载*/
function scrollside(){
var box=$(".box");
var lastboxheight=box.last().offset().top+Math.floor(box.last().height()/2); //get得到的是dom元素，等同于box.last().get(0).offsetTop.+Math.floor(box.last().height()/2)
/*当前容器高度*/
var doucmentheight=$(document).height();
/*滚动的距离*/
var scrollheight=$(window).scrollTop();
return (lastboxheight<doucmentheight+scrollheight)?true:false;
}
function imgLocation(){
var box=$(".box");
var boxWidth=box.eq(0).width();
var num=Math.floor($(window).width()/boxWidth); //设备宽度除以盒子宽度，并取整
var boxArry=[];
box.each(function(index,value){/*一次一次取出元素比较*/
var boxheight=box.eq(index).height();
if(index<num){
//boxArry[index]=boxheight;
boxArry.push(boxheight);
}else{
var minheight=Math.min.apply(null,boxArry);//Math.min（）括号内必须是数字
/*获取最小位置*/
var minboxindex= $.inArray(minheight,boxArry);
/*此时的value是一个个dom节点，通过$()获取元素，再通过css设置样式*/
$(value).css({
"position":"absolute",
"top":minheight,
"left":box.eq(minboxindex).position().left
});
/*重新计算上一个最小高度图片高度，加上现在这个图片高度*/
/*改变的是第一排数组中最小高度的位置*/
boxArry[minboxindex]+=box.eq(index).height();
}
});
}
</script>
</html>
