#学习笔记#(28)JS瀑布流-慕课

最新推荐文章于 2019-11-05 10:02:35 发布

游走走

最新推荐文章于 2019-11-05 10:02:35 发布

阅读量380

点赞数

分类专栏： web 学习笔记

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_24734285/article/details/50603807

版权

学习笔记同时被 2 个专栏收录

108 篇文章 0 订阅

订阅专栏

web

93 篇文章 1 订阅

订阅专栏

waterfall.html

<html>
	<head>
		<title>瀑布流布局</title>
		<meta charset="gb2312"/>
		<link type="text/css" rel="stylesheet" href="style2.css"/>
		<script src="javascript2.js"></script>
	</head>
	<body>
		<div id="main"><!--放置所有图片的容器，设置id方便js获取元素-->
			<div class="box"><!--每张图片用一个box装载-->
				<div class="pic"><!--在这里放置图片，并设置图片的样式-->
					<img src="images/0.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/0.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/1.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/2.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/3.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/4.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/5.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/6.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/7.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/8.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/9.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/10.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/11.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/12.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/13.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/14.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/15.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/16.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/17.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/18.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/19.jpg"></img>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/20.jpg"></img>
				</div>
			</div>
		</div>
	</body>
</html>

style.css

*{
	margin:0px;
	padding:0px;
}
#mian{
	position:relative;
}
.box{
	float:left;
	padding:15px 0px 0px 15px;
}
.pic{
	padding:10px;
	border:1px solid #ccc;
	border-radius:5px;
	box-shadow:0 0 5px #ccc;
}
.pic img{
	width:165px;
	height:auto;
}

javascript.js

window.οnlοad=function(){
	waterfall("main","box");
}
function waterfall(parent,box){
	//将main下所有class为box的元素取出
	var oParent=document.getElementById(parent);
	var oBoxs=getByClass(oParent,box);
	//计算整个页面显示的列数（页面宽度/box宽度）
	var oBoxW=oBoxs[0].offsetWidth;// 202 =图片宽度165+内边距10*2+边框宽度1*2+15
	var cols=Math.floor(document.documentElement.clientWidth/oBoxW);//获取列数
	//设置main的宽度
	oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0px auto;';
	var hArr=[];//用来放置每列的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);//Math.min()只能获取一组数值中的最小值，不能直接对数组进行处理
			var index=getMinhIndex(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;
		}
	}
}
//根据class获取元素
function getByClass(parent,clsName){
	var boxArr=new Array(),//用来存储获取到的所有class为box的元素
		oElements=parent.getElementsByTagName("*");
		for(var i=0;i<oElements.length;i++){
			if(oElements[i].className==clsName){
				boxArr.push(oElements[i]);
			}
		}
		return boxArr;
}
function getMinhIndex(arr,val){
	for (var i in arr) {
		if(arr[i]==val){
			return i;
		}
	};
}