編程練習(xí)
小伙伴們，根據(jù)所學(xué)知識，實現(xiàn)除第一行之外的其他圖片的布局。
溫馨提示:完成任務(wù)后，請驗證是否與實踐描述效果一致，如一致，恭喜您，你已經(jīng)掌握此技能，否則，請重復(fù)學(xué)習(xí)此節(jié)內(nèi)容。
任務(wù)
任務(wù)1.計算最小值和求最小值在數(shù)組中的索引
任務(wù)2.定位圖片
提示:
1. 遍歷所有數(shù)據(jù)塊，將前五張圖片的高度值添加到數(shù)組中
2. 借助apply()方法求出數(shù)組中的最小值
3. 編寫一個求某個值在數(shù)組中索引的方法，求出最小值在數(shù)組中的索引
4. 根據(jù)最小值和最小值的索引計算圖片出現(xiàn)的位置
5. 根據(jù)圖片的高度值改變數(shù)組
<!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){
// 將圖片的高度值添加到數(shù)組中
}else{
// 求最小值和最小值的索引
// 計算及定義圖片出現(xiàn)的位置
oBoxs[i].style.position='absolute';
// 改變數(shù)組值
}
}
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>
// 求值在數(shù)組中的索引,arr接收的是數(shù)組，val接收的是判斷的值
function getMinhIndex(arr,val){
}
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
