瀑布流第一节课
时间：6年前 阅读：4865
下面代码最终效果点（运行代码）看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流第一节课</title>
<style type="text/css">
#main .pin{
width: 225px;
height: auto;
padding: 15px 0px 0px 15px;
float: left;
}
#main .pin .box{
width: 205px;
height: auto;
padding: 10px;
background: #FFF;
border: 1px solid darkgray;
box-shadow: 0px 0px 6px 5px darkgrey;
border-radius: 5px;
}
#main .pin .box img{
width: 205px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oparent = document.getElementById('main');
var apin = getClassObj(oparent,'pin'); //调用getClassObj(); oparent父级 pin子级
//alert(apin.length); //看一下捉取成功没有
//获取窗口宽度 除以apin[0]的第0个，第一个，随便都行
// 看它能放得下多少个apin然后取整
var iptinw = apin[0].offsetWidth;
// var num = Math.floor(document.documentElement.clientWidth/apin[0].offsetWidth);
var num = Math.floor(document.documentElement.clientWidth/iptinw); //获得视窗的宽度除去其中的一个,然后取整
// oparent.style.cssText = 'width:'+num*apin[0].offsetWidth+'px';margin:0 auto;
oparent.style.cssText = 'width:'+num*iptinw+'px;margin:0 auto;';
// 把后面加进来的图片,找高度最低的图片下面加
var compareAarr = [];
// var str = ''; //''字符串 弹出来一下
// num 只比较第一排的
// for(var i=0;i<num;i++){
// 循环全部的apin
for(var i=0;i<apin.length;i++){
if (i<num) {
// compareAarr[i]数组里面的i
compareAarr[i] = apin[i].offsetHeight;
}else{
var minH = Math.min.apply({},compareAarr);//用这个数函数取出最小高度那个的值 需要两个参数 填一个空对像({},compareAarr) 和(null,compareAarr)都行
// var minkey 用一个变量把它接走
var minKey = getMinKey(compareAarr,minH); //调用下面写的函数 compareAarr把这个数组放进去，然后放进最小值
//alert(minKey);
// alert(minH); 试了一下取得最小的高度的那个成功
apin[i].style.Position = 'absolute'; // 没插件不用写
apin[i].style.top = minH + "px";
apin[i].style.left = apin[minKey].offsetLeft + "px";
compareAarr[minKey] += apin[i].offsetHeight; //+=的意思是 a+=b 就是a=a+b 解释：把a+b的值赋给a
}
// str += i+'=>'+apin[i].offsetHeight+'\n'; // '\n'换行 弹出来一下
}
//alert(str); // 弹出正常获得数值
// alert(compareAarr);试一下获得它们的高度成功offsetHeight
// var minH = Math.min.apply({},compareAarr);//用这个数函数取出最小高度那个的值 需要两个参数 填一个空对像({},compareAarr) 和(null,compareAarr)都行
// var minkey 用一个变量把它接走
// var minKey = getMinKey(compareAarr,minH); //调用下面写的函数 compareAarr把这个数组放进去，然后放进最小值
//alert(minKey);
// alert(minH); 试了一下取得最小的高度的那个成功
// apin[num].style.Position = 'absolute'; // 没插件不用写
// apin[num].style.top = minH + "px";
// apin[num].style.left = apin[minKey].offsetLeft + "px";
// 重新获取一下,第2,3小后面的,要更新一下数组里面的高度 compareAarr上面的数组 minKey这个是刚才获得最小的
// compareAarr[minKey] += apin[num].offsetHeight; //+=的意思是 a+=b 就是a=a+b 解释：把a+b的值赋给a
// alert(compareAarr);
// 重新获取一下
var minH = Math.min.apply({},compareAarr);
var minKey = getMinKey(compareAarr,minH);
// 最小的那个选出来了补上去,再往下第2小,3小的有后面加进来的数据还要补上去
apin[num+1].style.top = minH + "px";
apin[num+1].style.left = apin[minKey].offsetLeft + "px";
// 没插件不用写
for (var i=num;i<apin.length;i++) {
apin[i].style.Position = 'absolute';
drag(apin[i]);
}
}
// 获妈数组最小值的键值
function getMinKey(arr,minH){ //arr数组,minH最小高度
//for...in 语句用于对数组或者对象的属性进行循环操作。 使用 for ... in 循环遍历数组。
//for (变量 in 对象)
//{
// 在此执行代码
//}
for (key in arr) {
if (arr[key]==minH) { //当arr这个数组高度key=minH等于这个最小高度 这样就匹配到了
return key; //只要得到这个key就好，可以直接返回去函数
}
}
}
// 通过class选择元素 parent父级 className 类名
function getClassObj(parent,className){
var obj = parent.getElementsByTagName('*'); //'*' 这个星就是全部的意思
var result = []; //数组
for (var i=0;i<obj.length;i++) {
if (obj[i].className == className) { //如果obj[i].className == 传过来的className匹配到了
result.push(obj[i]); //push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
}
}
return result;
}
</script>
</head>
<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840509108737.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840509137756.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840509164082.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840510127179.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840510188979.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840510935198.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840510435945.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840511145712.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840511150837.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840511174371.png"/>
</div>
</div>
</div>
</body>
</html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论