整个盒子的宽度和高度（包括border+padding），不再是JS中的offsetWidth，而是JQ中的outerWidth(),
绝对定位不再是js中的offsetTop,而是offset().top,注意：top后没有括号；
找某个数组中某个值得下标$.inArray(某值，某数组）；
遍历循环$().each(function(index,value){});和$.each(obj,function(index,value){})
index为下标，value是个DOM对象，是循环的内容，要想在JQ中使用，需要转换成JQ对象来使用$(value)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流</title>
<style type="text/css">
*{margin:0;padding:0;}
#main{position:relative;}
.box{padding:5px;
float:left;}
.boximg{padding:5px;
border:1px solid red;
border-shadow:0 0 5px #cccccc;
border-radius:5px;}
img{width:250px;
height:auto;}
</style>
<script src="jquery-1.12.0.min.js"></script>
<script>
$(function(){
myplay();
var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},
{"src":"6.jpg"}]};
$(window).on("scroll",function(){
var $lastobox=$(".box").last();
var lastH=$lastobox.offset().top+Math.floor($lastobox.outerHeight()/2); //注意offset().top和outerHeight()
var h=$(window).outerHeight();
var scrollh=$(window).scrollTop();
if(lastH<h+scrollh)
{
$.each(dataInt.data,function(index,value){
var $oBox=$("<div>").addClass("box").appendTo($("#main"));
var $oBoximg=$("<div>").addClass("boximg").appendTo($oBox);
var $oimg=$("<img>").attr("src","img/"+$(value).attr("src")).appendTo($oBoximg);
});
myplay();
}
})
})
function myplay()
{
//找到main的宽，并让它居中
var $obox=$(".box");
var w=$(window).outerWidth();
var oboxW=$obox.eq(0).outerWidth();
var cols=Math.floor(w/oboxW);
$("#main").width(oboxW*cols).css("margin","0 auto");
//创建储存的高度，第一排后面的图片进行定位
var oboxH=[];
//JQ中遍历，用each
$obox.each(function(index,value)
{
if(index<cols)
{
oboxH.push($obox.eq(index).outerHeight());
}
else
{
var minH=Math.min.apply(null,oboxH);
var minHindex=$.inArray(minH,oboxH); //找某个值在数组中的下标
$obox.eq(index).css({"position":"absolute",
"left":minHindex*oboxW+"px",
"top":minH+"px"});
oboxH[minHindex]+=$obox.eq(index).outerHeight();
}
})
}
</script>
</head>
<body>
<div id="main">
<div class="box">
<div class="boximg">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/8.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/9.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/10.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/11.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/12.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/8.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/9.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/10.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/11.jpg">
</div>
</div>
</div>
</body>
</html>
随时随地看视频
