慕课网

第1章瀑布流布局简介
视频：1-1 瀑布流布局简介(02:29)

编程练习

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

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

任务

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

任务2.定位图片

  提示:

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

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

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

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

  5. 根据图片的高度值改变数组

?不会了怎么办

index.html

<!Doctype> <html> <head> <title>瀑布流布局</title> <meta charset="utf-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div id="main"> <div class="box"> <div class="pic"> <img src="images/0.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="images/1.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="images/2.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="images/3.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="images/4.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="images/5.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="images/6.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="images/7.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="images/8.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="images/9.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="images/10.jpg" /> </div> </div> </div> </body> </html> <script type=”text/javascript”> window.onload=function(){ waterfall('main','box'); } function waterfall(parent,box){ var oParent=document.getElementById(parent); var oBoxs=getByClass(oParent,box); for(var i=0;i<oBoxs.length;i++){ if(i<cols){ // 将图片的高度值添加到数组中 }else{ // 求最小值和最小值的索引 // 计算及定义图片出现的位置 oBoxs[i].style.position='absolute'; // 改变数组值 } } function getByClass(parent,clsName){ var boxArr=new Array(), oElements=parent.getElementsByTagName('*'); for(var i=0;i<oElements.length;i++){ if(oElements[i].className==clsName){ boxArr.push(oElements[i]); } } return boxArr; } </script> // 求值在数组中的索引,arr接收的是数组，val接收的是判断的值 function getMinhIndex(arr,val){ }

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

2-7 编程练习

编程练习

任务

写笔记

收藏课程后，能更快找到我哦～