原生JS实现瀑布流

最新推荐文章于 2022-09-27 14:40:02 发布

Axs1

最新推荐文章于 2022-09-27 14:40:02 发布

阅读量174

点赞数

分类专栏： JS HTML

本文链接：https://blog.csdn.net/Woyao01011/article/details/83098868

版权

JS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

JS代码

window.onload=function(){
	imgnum("container","box");
	imgheight("container","box")
		var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"1.jpg"},{"src":"9.jpg"},{"src":"6.jpg"},{"src":"4.jpg"},{"src":"3.jpg"}]}
		//滚动条监听事件
	window.onscroll=function(){
		if(flag("box")){
			var container=document.getElementsByClassName("container")[0];
		for(i=0;i<imgData.data.length;i++){
			var box=document.createElement("div");
			box.className="box";
			container.appendChild(box);
			var imgbox=document.createElement("div");
			imgbox.className="imgbox";
			box.appendChild(imgbox);
			var img=document.createElement("img");
			img.src="img/"+imgData.data[i].src;
			imgbox.appendChild(img);
			}
		//如果不重新调用下面这两个函数，新加载的图片格式会乱；
			imgnum("container","box");
			imgheight("container","box")
		}
		
	}
}
function flag(son){
	//获取最后一张图片的高度
	var cson=document.getElementsByClassName(son);
	var lastHeight=cson[cson.length-1].offsetTop;
	//获取滚动条滚动的距离
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
	//当最后一张图片的高度小于滚动条滚动的距离加上页面的高度的时候，返回true；
	if(scrollTop+pageHeight>=lastHeight){
		return true;
	}else{
		return false;
	}
}

function imgnum(father,son){
	var cfather=document.getElementsByClassName(father);
	var cson=document.getElementsByClassName(son);
	var num=cfather[0].offsetWidth/cson[0].offsetWidth;
	num=parseInt(num);
	cfather[0].style.width=cson[0].offsetWidth*num+"px"
	cfather[0].style.margin="0 auto";	
	cfather[0].style.position="relative";
	return num;
}

function imgheight(father,son){
	var cson=document.getElementsByClassName(son);
	var imgheightArr=[];
	for(i=0;i<cson.length;i++){
		if(i<imgnum("container","box")){
			imgheightArr[i]=cson[i].offsetHeight;
		}else{
			var minHeight=Math.min.apply(Math,imgheightArr)
			var indexmin=minIndex(imgheightArr,minHeight);
//将图片放在第一行最小height的图片的下面
			cson[i].style.position="absolute";
			cson[i].style.top=minHeight+"px";
			cson[i].style.left=cson[indexmin].offsetLeft+"px";
			imgheightArr[indexmin]=minHeight+cson[i].offsetHeight;
		}
	}
}
//确定最小height图片的位置
function minIndex(imgheightArr,minHeight){
	for(var i in imgheightArr){
		if(imgheightArr[i]==minHeight){
			var min=i;
			return min;
		}
	}
}

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="box">
				<div class="imgbox">
					<img src="img/1.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="imgbox">
					<img src="img/2.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="imgbox">
					<img src="img/3.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="imgbox">
					<img src="img/4.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="imgbox">
					<img src="img/5.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="imgbox">
					<img src="img/6.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="imgbox">
					<img src="img/7.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="imgbox">
					<img src="img/8.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="imgbox">
					<img src="img/9.jpg"/>
				</div>
			</div>
		</div>
	</body>
</html>

CSS代码

*{
	margin: 0;
	padding: 0;
}
.container{
	margin: 0 auto;
}
.box{
	
	width: 700px;
	height: auto;
	padding: 5px;
	border: 1px solid #cccccc;
	border-radius:2px ;
	box-shadow: 0 0 5px gray;
	float: left;
}
.boximg{
	width: 700px;
	padding: 5px;
}

img{
	width: 700px;
	height: auto;
}

Axs1

关注

0
点赞
踩
0

收藏

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

JS代码window.onload=function(){ imgnum("container","box"); imgheight("container","box") var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":&q
复制链接

扫一扫