原生JS实现瀑布流效果

前两天通过B站在极客学院学习了JS动态瀑布流效果：主要是HTML+CSS控制样式，通过JS实现全局瀑布流样式，以及通过访问自定义的JSON字符串，实现图片无限加载；现对其代码进行整理，供日后学习参考。

HTML代码部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>瀑布流</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="container">
    	<div class="box">
    		<div class="boximg">
    			<img src="images/11.jpg" alt="">
    		</div>    		
    	</div>
    	<div class="box">
    		<div class="boximg">
    			<img src="images/12.jpg" alt="">
    		</div>    		
    	</div>
    	<div class="box">
    		<div class="boximg">
    			<img src="images/13.jpg" alt="">
    		</div>    		
    	</div>
    	<div class="box">
    		<div class="boximg">
    			<img src="images/14.jpg" alt="">
    		</div>    		
    	</div>
    	<div class="box">
    		<div class="boximg">
    			<img src="images/15.jpg" alt="">
    		</div>    		
    	</div>
    	<div class="box">
    		<div class="boximg">
    			<img src="images/16.jpg" alt="">
    		</div>    		
    	</div>
    	<div class="box">
    		<div class="boximg">
    			<img src="images/17.jpg" alt="">
    		</div>    		
    	</div>
    	<div class="box">
    		<div class="boximg">
    			<img src="images/18.jpg" alt="">
    		</div>    		
    	</div>
    	<div class="box">
    		<div class="boximg">
    			<img src="images/19.jpg" alt="">
    		</div>    		
    	</div>
    	<div class="box">
    		<div class="boximg">
    			<img src="images/20.jpg" alt="">
    		</div>    		
    	</div>
    	<div class="box">
    		<div class="boximg">
    			<img src="images/21.jpg" alt="">
    		</div>    		
    	</div>
    	<div class="box">
    		<div class="boximg">
    			<img src="images/22.jpg" alt="">
    		</div>    		
    	</div>   	
    	
    </div>
</body>
</html>

CSS代码部分

@charset "UTF-8";
/**
 * 
 * @authors zhanghe-V ([email protected])
 * @date    2018-06-11 20:12:16
 * @version $1.0$
 */
*{
	padding: 0px;
	margin: 0px;
}
#container{
	position: relative;
}
.box{
	padding: 5px;
	float: left;
}
.boximg{
	padding: 5px;
	border: 1px solid #595959FF;
	box-shadow: 0 0 5px #ccc; /*阴影效果*/
	border-radius: 5px;/*圆角效果*/	
}
.boximg img{
	width: 200px;
	height: auto;
}

JS代码部分

/**
 * 
 * @authors zhanghe-V ([email protected])
 * @date    2018-06-11 20:23:17
 * @version $1.0$
 */
window.onload = function(){
	imgLocation("container","box")

	var imgData = {"data":[
							{"src":"11.jpg"},
							{"src":"12.jpg"},
							{"src":"13.jpg"},
							{"src":"14.jpg"},
							{"src":"15.jpg"},
							{"src":"16.jpg"},
							{"src":"17.jpg"},
							{"src":"18.jpg"},
							{"src":"19.jpg"},
							{"src":"20.jpg"},
							{"src":"21.jpg"},
							{"src":"22.jpg"},]}

	
	window.onscroll = function(){
		if (checkFlag()) {
			var cparent = document.getElementById("container");
			for (var i = 0; i < imgData.data.length; i++) {
				var ccontent = document.createElement("div");
				ccontent.className="box";
				cparent.appendChild(ccontent);
				var boximg = document.createElement("div");
				boximg.className="boximg";
				ccontent.appendChild(boximg);
				var img = document.createElement("img");
				img.src = "images/"+imgData.data[i].src;
				boximg.appendChild(img);
			}
			imgLocation("container","box");
		}		
	}
}

function checkFlag(){
	var cparent = document.getElementById("container");
	var  ccontent = getChildElement(cparent,"box");
	var lastContentHeight = ccontent[ccontent.length-1].offsetTop;
	var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
	var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;
	if (lastContentHeight<(scrollTop+pageHeight)) {
		return true;
	}
	console.log(lastContentHeight+","+scrollTop+","+pageHeight);
}

function imgLocation(parent,content){
	//将parent下所有的content全部取出
	var cparent = document.getElementById(parent);
	var ccontent = getChildElement(cparent,content);
	var imgwidth = ccontent[0].offsetWidth;
	//获得每一行显示图片的个数
	var cols = Math.floor(document.documentElement.clientWidth / imgwidth);
	//设置父容器container的宽度，并设置样式居中
	cparent.style.cssText = "width:"+imgwidth*cols+"px;margin:0 auto";

	var boxHeightArr = [];
	for (var i = 0; i < ccontent.length; i++) {
		if (i<cols) {
			boxHeightArr[i] = ccontent[i].offsetHeight;			
		}
		else{
			var minheight = Math.min.apply(null,boxHeightArr);
			var minIndex = getminheightLocation(boxHeightArr,minheight);
			ccontent[i].style.position = "absolute";
			ccontent[i].style.top = minheight+"px";
			ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
			boxHeightArr[minIndex] = boxHeightArr[minIndex]+ccontent[i].offsetHeight;
		}
		
	}
}

function getminheightLocation(boxHeightArr,minheight){
	for (var i in boxHeightArr) {
		if (boxHeightArr[i] == minheight) {
			return i;
		}
	}
}

//将parent下的所有类名为content的div存储在自定义的数组contentArr中
function getChildElement(parent,content){
	var contentArr = [];
	var allcontent = parent.getElementsByTagName("*");
	 //获取所有内容，返回的是一个dom对象可以遍历，有length属性，但不是数组。
	for (var i = 0; i < allcontent.length; i++) {
		if (allcontent[i].className == content) {
			contentArr.push(allcontent[i]);//向数组contentArr末尾进行追加content
		}	
	}
	return contentArr;
}

原生JS实现瀑布流效果

猜你喜欢