javascript实战——瀑布流

最新推荐文章于 2025-04-29 09:03:35 发布

shaonian1996

最新推荐文章于 2025-04-29 09:03:35 发布

阅读量199

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_41179401/article/details/79391119

javascript 专栏收录该内容

43 篇文章

订阅专栏

本文介绍如何使用JavaScript实现瀑布流布局，包括自适应屏幕宽度、动态加载图片等关键步骤，并展示了完整的HTML、CSS及JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript实战——瀑布流

html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>瀑布流</title>
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div id="container">
	<div class='box'>
		<div class="box_img">
			<img src="image/1.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/2.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/3.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/4.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/5.png">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/6.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/7.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/8.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/9.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/10.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/1.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/2.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/3.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/4.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/5.png">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/6.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/7.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/8.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/9.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/10.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/1.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/2.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/3.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/4.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/5.png">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/6.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/7.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/8.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/9.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/10.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/1.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/2.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/3.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/4.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/5.png">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/6.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/7.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/8.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/9.jpg">
		</div>
	</div>
	<div class='box'>
		<div class="box_img">
			<img src="image/10.jpg">
		</div>
	</div>
</div>
</body>
</html>

css:

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

瀑布流图示：

瀑布流：打破传统布局，使图片有规律地紧凑在一起，并且当滚动到一定距离时自动加载。

思路：

1：图片是float布局，要实现自适应：根据屏幕的宽度判断；

给整个页面一个宽度等于图片宽度*（屏幕宽度/图片宽度）

js:

window.onload=function(){
	var container=document.getElementById('container');
	var img=getClass(container,'box');
	var imgWidth=img[0].offsetWidth;  //number
	container.style.width=imgWidth*(document.documentElement.clientWidth/imgWidth)+'px';
}
// 获取指定父元素的子元素
function getClass(parent,className){
	var temp=[];
	var node=null;
	if(parent){
		node=parent;
	}else{
		node=document;
	}
	var all=node.getElementsByTagName('*');
	for(var i=0;i<all.length;i++){
		if(all[i].className==className){
			temp.push(all[i]);
		}
	}
	return temp;  //用数组存储节点
}

2：完成一个页面的瀑布流；

计算出第一行高度最低的，将第二行的图片定位设为absolute；top:第一行最低图片的高度；left:第一行最低图片距离父元素左边的距离；

由于是absolute，再将那个最小高度的图片的高度设为原来高度加上下一张的高度；

js:

window.onload=function(){
	var container=document.getElementById('container');
	var img=getClass(container,'box');
	var imgWidth=img[0].offsetWidth;      //number
	var num=parseInt(document.documentElement.clientWidth/imgWidth)           //一行图片个数
	container.style.width=imgWidth*(document.documentElement.clientWidth/imgWidth)+'px';//设置网页宽度
	var boxHeightarr=[];                                                      //存放图片盒子高度的数组
	for(var i=0;i<img.length;i++){
		if(i<num){
			boxHeightarr[i]=img[i].offsetHeight;                              //将图片高度作为数组元素放进去
		}else{
			var minHeight=Math.min.apply(null,boxHeightarr);          		  //对象冒充 最小高度
			var minIndex=getminheightLocation(boxHeightarr,minHeight); 		  //获取最低图片位置
			img[i].style.position='absolute';
			img[i].style.top=minHeight+'px';
			img[i].style.left=img[minIndex].offsetLeft+'px';                  //offsetLeft相对于父节点的位置
			boxHeightarr[minIndex]=boxHeightarr[minIndex]+img[i].offsetHeight;//将最低图片盒子位置的高低设为原高度加上下一张高度
		}
	}		
}
// 获取指定父元素的子元素
function getClass(parent,className){
	var temp=[];
	var node=null;
	if(parent){
		node=parent;
	}else{
		node=document;
	}
	var all=node.getElementsByTagName('*');
	for(var i=0;i<all.length;i++){
		if(all[i].className==className){
			temp.push(all[i]);
		}
	}
	return temp;  //用数组存储节点
}
// 获取最低图片盒子位置的方法
function getminheightLocation(boxHeightarr,minHeight){
	for(var i in boxHeightarr){          //遍历数组
		if(boxHeightarr[i]==minHeight){   //数组某一项等于最小高度，返回索引
			return i;
		}
	}
}

图示：

3：当滚动到最后一张图片时再继续加载；

当鼠标滚动的高度scrollTop+页面高度>最后一张的offsetTop

4：利用json文件类型模拟加载。

当满足加载条件时，在创建节点，添加节点，最后图片文件已json文件类型的方式加载进去

同时，将以上条件重新写一遍。

js:

window.onload=function(){
	var imgData={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.png"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"}]}
	var container=document.getElementById('container');
	var img=getClass(container,'box');
	var imgWidth=img[0].offsetWidth;      //number
	var num=parseInt(document.documentElement.clientWidth/imgWidth)           //一行图片个数
	container.style.width=imgWidth*(document.documentElement.clientWidth/imgWidth)+'px';//设置网页宽度
	var boxHeightarr=[];                                                      //存放图片盒子高度的数组
	for(var i=0;i<img.length;i++){
		if(i<num){
			boxHeightarr[i]=img[i].offsetHeight;                              //将图片高度作为数组元素放进去
		}else{
			var minHeight=Math.min.apply(null,boxHeightarr);          		  //对象冒充 最小高度
			var minIndex=getminheightLocation(boxHeightarr,minHeight); 		  //获取最低图片位置
			img[i].style.position='absolute';
			img[i].style.top=minHeight+'px';
			img[i].style.left=img[minIndex].offsetLeft+'px';                  //offsetLeft相对于父节点的位置
			boxHeightarr[minIndex]=boxHeightarr[minIndex]+img[i].offsetHeight;//将最低图片盒子位置的高低设为原高度加上下一张高度
		}
	}
	// 瀑布流
	window.onscroll=function(){
		var img=getClass(container,'box');
		var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;        //滚动高度
		var pageHeight=document.documentElement.clientHeight||document.body.clientHeight; //页面高度
		var lastImgoffsetTop=img[img.length-1].offsetTop;
		if(scrollTop+pageHeight>lastImgoffsetTop){	//加载条件
		// 加载方法：重新创建节点，再写一遍上面的一页的瀑布流的方法
		var container=document.getElementById('container');
			for(var i=0;i<imgData.data.length;i++){
				var ccontent=document.createElement('div');
				ccontent.className='box';
				container.appendChild(ccontent);
				var boximg=document.createElement('div');
				boximg.className='box_img';
				ccontent.appendChild(boximg);
				var img=document.createElement('img');
				img.src='image/'+imgData.data[i].src;
				boximg.appendChild(img);
			}
// 再写一遍
		var img=getClass(container,'box');
		var imgWidth=img[0].offsetWidth;     
		var num=parseInt(document.documentElement.clientWidth/imgWidth)           //一行图片个数
		container.style.width=imgWidth*(document.documentElement.clientWidth/imgWidth)+'px';//设置网页宽度
		var boxHeightarr=[];                                                      //存放图片盒子高度的数组
		for(var i=0;i<img.length;i++){
			if(i<num){
				boxHeightarr[i]=img[i].offsetHeight;                              //将图片高度作为数组元素放进去
			}else{
				var minHeight=Math.min.apply(null,boxHeightarr);          		  //对象冒充 最小高度
				var minIndex=getminheightLocation(boxHeightarr,minHeight); 		  //获取最低图片位置
				img[i].style.position='absolute';
				img[i].style.top=minHeight+'px';
				img[i].style.left=img[minIndex].offsetLeft+'px';                  //offsetLeft相对于父节点的位置
				boxHeightarr[minIndex]=boxHeightarr[minIndex]+img[i].offsetHeight;//将最低图片盒子位置的高低设为原高度加上下一张高度
			}
		}
		}
	}
}
// 获取指定父元素的子元素
function getClass(parent,className){
	var temp=[];
	var node=null;
	if(parent){
		node=parent;
	}else{
		node=document;
	}
	var all=node.getElementsByTagName('*');
	for(var i=0;i<all.length;i++){
		if(all[i].className==className){
			temp.push(all[i]);
		}
	}
	return temp;  //用数组存储节点
}
// 获取最低图片盒子位置的方法
function getminheightLocation(boxHeightarr,minHeight){
	for(var i in boxHeightarr){          //遍历数组
		if(boxHeightarr[i]==minHeight){   //数组某一项等于最小高度，返回索引
			return i;
		}
	}
}