-
提示: 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下的所以子元素标签查看全部
举报