JavaScript实战项目--瀑布流效果_实际项目运用瀑布流-CSDN博客

本文链接：https://blog.csdn.net/u010108076/article/details/108039533

代码结构
- Demo # 项目名
  - img # 图片文件夹
    - 1.jpg
    - 2.jpg
    - 3.jpg
  - index.html # 页面布局
  - css # css文件夹
    - style.css
  - js # js文件夹
    - app.js

// index.html
<!DOCTYPE html>
<html>	
	<head lang="en">
		<meta charset="utf-8">
		<title>瀑布流</title>
		<link rel="stylesheet" type="text/css" src="css/style.css">
		<script type="text/javascript" src="js/app.js"></script>
	</head>
	<body>
		<div id="container">
			<div class="box">
				<div class="box_img">
					<img src="img/1.jpg">
				</div>
				<div class="box_img">
				     	<img src="img/2.jpg">
				</div>
				<div class="box_img">
				         <img src="img/2.jpg">
				</div>
			</div>
		</div>
	</body>
</html>

// style.css
*{
	margin:0px;
	padding:0px;
}
#container{
	position:relative;
}
.box{
	padding:5px;
	position:float;
}
.box_img{
	padding:5px;
	border:1px solid #cccccc;
	box-shadow:0 0 5px #cccccc;
	box-radius:5px;
}
.box_img img{
	width:150px;
	height:auto;
}

//app.js
window.onload = function(){
	imgLocation("container","box");
	var imgData = {"data": [{"scr":"1.jpg"},{"scr":"2.jpg"},{"scr":"3.jpg"},]}
	//滑动加载
	window.onscroll = function(){
		if(checkFlag()){
			var cparent = document.getElementById("container");
			for(var i=0;i < imgData.data.lenght;i++){
				var ccontent = document.createElement("div");
				ccontent.className = "box";
				cparent.appendChild(ccontent);
				var boximg = document.createElement("div");
				boximg.className = "box_img";
				ccontent.appendChild(boximg);
				var img = document.createElement("img");
				img.src = "img/" + 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;
	}
	
	
}

//设定图片位置
function imgLocation(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);
	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 miniheight = Math.min.apply(null,BoxHeightArr);
			var minIndex = getminheightLocation(BoxHeightArr,miniheight);
			ccontent[i].style.position = "absolute";  //设定子元素位置 
			ccontent[i].style.top = miniheight + "px";
			ccontent[i].style.left = ccontent[minIndex].offsetWidth + "px";
			BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;
		}
	}
	
}

//获取最小高度索引位置
functio getminheightLocation(BoxHeightArr,minHeight){
	for(var i in BoxHeightArr){
		if(BoxHeightArr[i] == minheight){
			return i;
		}
	}
}

//获取子元素内容
functon getChildElemet(parent,content){
	var contentArr = [];
	var allcontent = parent.getElementByTagName("*");
	for(var i=0;i<allcontent.lenght;i++){
		contentArr.push(allcontent[i]); 
	}
	return contentArr;
}