开发者学堂课程【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。
如下图所示：
