2-7 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，实现除第一行之外的其他图片的布局。

 

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

 

任务

任务1.计算最小值和求最小值在数组中的索引

任务2.定位图片

  提示:

  1. 遍历所有数据块，将前五张图片的高度值添加到数组中

  2. 借助apply()方法求出数组中的最小值

  3. 编写一个求某个值在数组中索引的方法，求出最小值在数组中的索引

  4. 根据最小值和最小值的索引计算图片出现的位置

  5. 根据图片的高度值改变数组
index.html 
  1. <!Doctype>
  2. <html>
  3.  <head>
  4.    <title>瀑布流布局</title>
  5.    <meta charset="utf-8" />
  6.    <link type="text/css" rel="stylesheet" href="css/style.css" />
  7.    <script type="text/javascript" src="js/script.js"></script>
  8.  </head>
  9.  <body>
  10.      <div id="main">
  11.  		<div class="box">
  12.  			<div class="pic">
  13.  				<img src="images/0.jpg" />
  14.  			</div>
  15.  		</div>
  16.  		<div class="box">
  17.  			<div class="pic">
  18.  				<img src="images/1.jpg" />
  19.  			</div>
  20.  		</div>
  21.  		<div class="box">
  22.  			<div class="pic">
  23.  				<img src="images/2.jpg" />
  24.  			</div>
  25.  		</div>
  26.  		<div class="box">
  27.  			<div class="pic">
  28.  				<img src="images/3.jpg" />
  29.  			</div>
  30.  		</div>
  31.   		<div class="box">
  32.  			<div class="pic">
  33.  				<img src="images/4.jpg" />
  34.  			</div>
  35.  		</div>
  36.   		<div class="box">
  37.  			<div class="pic">
  38.  				<img src="images/5.jpg" />
  39.  			</div>
  40.  		</div>
  41.   		<div class="box">
  42.  			<div class="pic">
  43.  				<img src="images/6.jpg" />
  44.  			</div>
  45.  		</div>
  46.  		<div class="box">
  47.  			<div class="pic">
  48.  				<img src="images/7.jpg" />
  49.  			</div>
  50.  		</div>
  51.  		<div class="box">
  52.  			<div class="pic">
  53.  				<img src="images/8.jpg" />
  54.  			</div>
  55.  		</div>
  56.  		<div class="box">
  57.  			<div class="pic">
  58.  				<img src="images/9.jpg" />
  59.  			</div>
  60.  		</div>
  61.   		<div class="box">
  62.  			<div class="pic">
  63.  				<img src="images/10.jpg" />
  64.  			</div>
  65.  		</div>
  66. 	</div>
  67.  </body>
  68. </html>
  69. <script type=”text/javascript”>
  70.  window.onload=function(){
  71.      waterfall('main','box');
  72. }
  73. function waterfall(parent,box){
  74.   var oParent=document.getElementById(parent);
  75.   var oBoxs=getByClass(oParent,box);
  76. for(var i=0;i<oBoxs.length;i++){
  77.     if(i<cols){
  78.        // 将图片的高度值添加到数组中
  79.     }else{
  80.       // 求最小值和最小值的索引
  81.  
  82.  
  83. // 计算及定义图片出现的位置
  84.       oBoxs[i].style.position='absolute';
  85.  
  86.  
  87.       // 改变数组值
  88.  
  89.     }
  90.   }
  91. function getByClass(parent,clsName){
  92.   var boxArr=new Array(), 
  93.       oElements=parent.getElementsByTagName('*');
  94.   for(var i=0;i<oElements.length;i++){
  95.     if(oElements[i].className==clsName){
  96.       boxArr.push(oElements[i]);
  97.     }
  98.   }
  99.   return boxArr;
  100. }
  101. </script>
  102.  
  103. // 求值在数组中的索引,arr接收的是数组，val接收的是判断的值
  104. function getMinhIndex(arr,val){
  105.  
  106. }
下一节