原生Js实现瀑布流

最新推荐文章于 2021-12-29 17:10:01 发布

uhhuh-495

最新推荐文章于 2021-12-29 17:10:01 发布

阅读量139

点赞数

分类专栏：功能（方法）实现案例文章标签：瀑布流 JavaScrip 前端

本文链接：https://blog.csdn.net/weixin_42166007/article/details/96621397

版权

功能（方法）实现案例专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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;
		}
	}
}

uhhuh-495

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生Js实现瀑布流

HTML：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/waterfall.css" /> </head> <b...
复制链接

扫一扫