-
提示:??1.?遍歷所有數據塊，將前五張圖片的高度值添加到數組中 ??2.?借助apply()方法求出數組中的最小值 ??3.?編寫一個求某個值在數組中索引的方法，求出最小值在數組中的索引 ??4.?根據最小值和最小值的索引計算圖片出現的位置 ??5.?根據圖片的高度值改變數組
<!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){
? ? ? ?// 將圖片的高度值添加到數組中
? ? ? ?hArr.push(oBoxs[i].offsetHeight)
? ? }else{
? ? ? // 求最小值和最小值的索引
? ? ? var minH = math.min.apply(null,hArr);
? ? ? var index = getMinIndex(hArr,minH);
// 計算及定義圖片出現的位置
? ? ? oBoxs[i].style.position='absolute';
? ? ? oBoxs[i].style.top=minH+'px';
? ? ? oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
? ? ??
? ? ? // 改變數組值
? ? ?hArr[index] += oBoxs[i].offsetHeight;
? ? }
? }
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){
? ? for(var i in arr){
? ? ? ? if(arr[i]==val)
? ? ? ? return i
? ? }
}
查看全部 -
定義函數getByClass()實現獲取document或指定父元素下所有class為on的元素。要求該函數可以接收一個參數也可以接收兩個參數
??提示:
??1.第一個參數為必需的，第二個參數為可選的
??2.第一個參數為要獲取的元素的類名，第二個參數如果傳，則傳父元素的id，不傳則默認用document
??3.返回獲取到的所有帶有”on”這個類的DOM元素
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="list">
<li class="on">1</li>
<li class="select">2</li>
<li class="on">3</li>
<li>4</li>
</ul>
<p class="on">class為on的p標簽</p>
</body>
</html>
<script type="text/javascript">
? window.onload=function(){
? ? ?var len1= getByClass('on','list');
? ? ?alert(len1.length); ?// 結果等于2為正確
var len2= getByClass('on');
? ? ?alert(len1.length); ?// 結果等于3為正確
}
function getByClass(clsName, parent){
?//定義函數getByClass()實現獲取document或指定父元素下所有class為on的元素 ?
?var oParent = parent?document.getElementById(parent):document;
?var boxArr = [],
?var oElement = parent.getElementsByTagName('*');
?for(var i=0;i<oElement.legth;i++){
? ? ?if(oElement[i].className == clsName){
? ? ? ? ?boxArr.push(oElement[i]);
? ? ?}
? ? ?return boxArr;
?}
}
</script>
查看全部 -
offsetWidth = 本身寬度 + 內層padding*2 + border*2 + 外層padding*2
查看全部 -
最后一個盒子的top值+其高度<document高度+滾動條滾動的值
查看全部 -
瀑布流：等寬不等高
查看全部 -
js:?
1、將main下所有class為box的元素取出來
查看全部 -
$("<img>").attr("src","0.jpg");
//attr用于獲取屬性，后接一個參數時為獲取屬性值，接兩個參數時為設置屬性值
查看全部 -
$.inArray(min.attr);
找到min在attr數組中的索引號
查看全部 -
width()：只獲取定義的寬度
outerWidth():? 獲取div的整個寬度，包括border,padding,margin
查看全部 -
var?hArr=[]; for(var?i=0;i<oBoxs.length;i++){ if(i<cols){ ????hArr.push(oBox[i].offsetHeight)查看全部 -
window.onload=function(){
????????????waterfall('main','box');
}
function waterfall(parent,box){
}
查看全部 -
window.onload=function()
查看全部 -
Jquery 優點連綴
查看全部 -
function getByClass(clsName, parent) { //定義函數getByClass()實現獲取document或指定父元素下所有class為on的元素 var result = []; if (clsName) { parent = parent || document; var elements = parent.getElementsByTagName('*'); for (var i = 0; i < elements.length; i++) { if (elements[i].className === clsName) { result.push(elements[i]); } } } return result; }查看全部
-
parent.document.getElementByTagName("*") //獲取parent下的所以子元素標簽查看全部
舉報