开发者学堂课程【jQuery 开发教程：jQuery_瀑布流1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4316
jQuery_瀑布流1
一、瀑布流
1. 瀑布流
（1）宽相等，高度不等
（2）计算出当前排高度最小的那个一个,下面继续放置图片
（3）当当前页面图片内容不够显示的时候,要继续加载新的图片
2. 图片大体布局
在weter.html设置图片摆放，代码如下
……
<img src=”images/i12.jpg”>
<div>
<div class=”pin”>
<div class=”box”>
<img src=”images/i13.jpg”>
</div>
</div>
……
</div>
<script src=”myapp.js”></script>
</body>
</html>
3.创建app.js文件
$ (document) .ready(function(){
$ (window) .on("load", function(){//图片加载完成之后再显示
ImgLocation();
})
});
) function ImgLocation(){
var box=$(".pin"); //返回一个数组
var boxWidth=box.eq(0) .width();//每张图片的宽度
var num=Math. floor ($ (window) . width() /boxWidth);//一行能摆放图片的个数
var numArr=[];
box . each( function(index,yalue){//定义each便利每一个图片
var boxHei ght=box . eq (index) .height();//获取每张图片的高度
if(index<num){//第一排
numArr [index] =boxHeight;
}else{//第二排
var minboxHei ght=Math . min. apply (numArr ,numArr); .
//console. log (minboxHeight);获得最小高度值
//jQuery. inArray(value，数组，数组的索引值0)
var minIndex=$. inArray (minboxHeight ,numArr);
console. log(minIndex) ;
}
})
}
运行后获得图片索引值为1。
如下图所示：