原生Js实现瀑布流

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/waterfall.css" />
	</head>
	<body>
		<div id="main">
			<div class="pic_box">
				<div class="pic">
					<img src="img/kjhot_3.png" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/pic_1.png" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/pic4.jpg" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/kjhot_3.png" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/pic_1.png" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/pic4.jpg" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/pic_1.png" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/kjhot_3.png" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/pic_1.png" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/kjhot_3.png" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/pic_1.png" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/kjhot_3.png" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/pic4.jpg" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/kjhot_3.png" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/pic_1.png" >
				</div>
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/pic4.jpg" >
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/waterfall.js" ></script>
	</body>
</html>

Css:

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

Js:

//window.load这个应该只是表明事件方法,但并未执行
//window.onload 这个表示加载完页面所有东西以后才执行,在页面只允许出现一个onload函数,因为它可编函数个数只有一个
window.onload = function(){
	waterfall('main','pic_box');
}

function waterfall(parent,childent){
	//获取大盒子
	var oParent = document.getElementById(parent);
	//获取所有含有class为pic_box的盒子
	var oBox = getpicbox(oParent,childent);
	//获取一列的宽度
	var oWidth = oBox[0].offsetWidth;
	//计算列数,使用舍入计算
	var cols = Math.floor(oParent.clientWidth/oWidth);  //获取大盒子宽度
//	var cols = Math.floor(document.documentElement.clientWidth/oWidth);  //获取窗口宽度
	//设置大盒子样式
	oParent.style.cssText='margin:0 auto;';
//	oParent.style.cssText='width:' + oWidth * cols + 'px;margin:0 auto;';  //设置总宽度
	//定义数组获取每行的高度,并设置排列
	var arrH = [];
//	var arrH = new Array();
	for(var i = 0;i < oBox.length;i++){
		if(i < cols){
			//将第一列的高度存入数组中
			arrH.push(oBox[i].offsetHeight);  //offsetHeight=内容高+padding+边框
		}
		//当i>cols时,对前面所有的图片高度进行遍历,将下一张图片放到合适的位置
		else{
			//获取前面的最小高度
			var minH = Math.min.apply(null,arrH);
			//获取最小高度的下标
			var minIndex = getminIndex(arrH,minH);
			//对图片进行排列
			oBox[i].style.position = 'absolute';
			oBox[i].style.top = minH + 'px';
 		    oBox[i].style.left = minIndex * oWidth + 'px';
 		    //更新数组,更新的高度=原来的高度+新加的盒子高度
			arrH[minIndex] += oBox[i].offsetHeight;
//			arrH[minIndex] = arrH[minIndex] + oBox[i].offsetHeight;
		}
	}
}
//获取所有图片盒子并存到数组中
function getpicbox(parent,classname){
	var picboxArr = new Array();
	//获取大盒子下的所有标签
	picboxItem = parent.getElementsByTagName('*');
	//筛选需要的盒子标签,并存放到数组中
	for(var i = 0;i < picboxItem.length; i++){
		if(picboxItem[i].className == classname){
			picboxArr.push(picboxItem[i]);
		}
	};
	return picboxArr;
}
//获取高度最小值
function getminIndex(array,min){
	//遍历数组
	for(var i in array){
		//筛选高度最小值下标
		if(array[i] == min){
			return i;
		}
	}
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值