如何用js实现瀑布流

最新推荐文章于 2023-03-19 19:23:07 发布

小R.

最新推荐文章于 2023-03-19 19:23:07 发布

阅读量367

点赞数 7

分类专栏：前端小白文章标签：瀑布流

本文链接：https://blog.csdn.net/qq_43652492/article/details/89388640

版权

前端小白专栏收录该内容

30 篇文章 0 订阅

订阅专栏

今天跟着视频一步一步敲，终于如愿制作出了瀑布流，在此做个总结，方便以后进一步加深对代码的理解和学习。

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>瀑布流--js实现</title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/index.js" ></script>
	</head>
	<body>
		<div id="main">
			<div class="box">
				<div class="pic">
					<img src="images/1.jpg" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/2.jpg" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/3.jpg" />
				</div>
			</div>									
			<div class="box">
				<div class="pic">
					<img src="images/7.jpg" />
				</div>
			</div>			
			<div class="box">
				<div class="pic">
					<img src="images/10.jpg" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/13.jpg" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/11.jpg" />
				</div>
			</div>						
			<div class="box">
				<div class="pic">
					<img src="images/18.jpg" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/14.jpg" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/17.jpg" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/16.jpg" />
				</div>
			</div>			
			<div class="box">
				<div class="pic">
					<img src="images/9.jpg" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/17.jpg" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/16.jpg" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="images/18.jpg" />
				</div>
			</div>			
			<div class="box">
				<div class="pic">
					<img src="images/20.jpg" />
				</div>
			</div>
		</div>
	</body>
</html>

css代码：

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

js代码：

window.onload = 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;
	//console.log(oBoxW);   //宽度252 = 图片宽度215 + 内边距10*2 + 边框宽度1*2 + 15
	var cols = Math.floor(document.documentElement.clientWidth/oBoxW);//Math.floor()用于取整
	//设置main宽度
	oParent.style.cssText = "width:"+oBoxW*cols+"px;margin:0 auto";
	var hArr = [];//存放每一列高度的数组
	for(var i = 0;i<oBoxs.length;i++){
		if(i<cols){
			hArr.push(oBoxs[i].offsetHeight);
		}else{
			var minH = Math.min.apply(null,hArr);
			var index = getMinhIndex(hArr,minH);
			oBoxs[i].style.position = "absolute";
			oBoxs[i].style.top = minH + "px";
			//oBoxs[i].style.left = oBoxW*index + "px";或者
			oBoxs[i].style.left = oBoxs[index].offsetLeft + "px";
			hArr[index] += oBoxs[i].offsetHeight;
		}
	}
}
//根据class获取元素
function getByClass(parent,clasName){
	var boxArr = new Array(),//用来存储获取到的所有class为box的元素
	oElements = parent.getElementsByTagName("*");
	for(var i = 0;i<oElements.length;i++){
		if(oElements[i].className == clasName){
			boxArr.push(oElements[i]);
		}
	}
	return boxArr;
}
function getMinhIndex(arr,val){
	for(var i in arr){
		if(arr[i] == val){
			return i;
		}
	}
}

如果你想实现滑动滚动条时显现内容，需要从后台获取数据，现模拟JSON格式的数据，也可以简单实现该效果，向其加入的代码如下：

window.onload = function(){
	waterfall("main","box");
	//将来数据从后台获取。现在没有后台，简单模拟json格式的数据
    var dataInt = {"data":[{"src":"16.jpg"},{"src":"18.jpg"},{"src":"17.jpg"}]};
window.onscroll = function(){
	if(checkScrollSlide){
		var oParent = document.getElementById("main");
		//将数据块渲染到页面底部
		for(var i = 0;i<dataInt.data.length;i++){
			var oBox = document.createElement("div");
			oBox.className = "box";
			oParent.appendChild(oBox);
			var oPic = document.createElement("div");
			oPic.className = "pic";
			oBox.appendChild(oPic);
			var oImg = document.createElement("img");
			oImg.src = "images/"+dataInt.data[i].src;
			oPic.appendChild(oImg);
		}
		//调用waterfall()函数
		waterfall("main","box");
	}
  }
}
//检测是否具备了滚条加载数据块的条件
function checkScrollSlide(){
	var oParent = document.getElementById("main");
	var oBox = getByClass(oParent,"box");
	var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	var height = document.body.clientHeight || document.documentElement.clientHeight;
	return (lastBoxH<scrollTop+height)?true:false;
}