13
2018
08

瀑布流第一节课

下面代码最终效果点(运行代码)看

<!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/post/7587.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。