原生JS实现瀑布流

最新推荐文章于 2024-07-18 11:48:33 发布

Q___Narcissus

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量736

点赞数 1

分类专栏： web前端文章标签： javascript 原生JS 瀑布流

本文链接：https://blog.csdn.net/Q___Narcissus/article/details/78017918

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先，给大家解释一下什么是瀑布流，这样来说吧！在逛淘宝的时候，我们无限下滑，就会加载出新的东西，这就是瀑布流。

今天呢，我给大家介绍原生JS实现的：

原生JS的方式：(首先附上代码，为了方便观看，我将CSS/HTML/JS写在了一起)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>原生JS瀑布流</title>
		<style>
			*{
				padding: 0px;
				margin: 0px;
			}
			
			#main
			{
				position: relative;
				height: 1000px;
			}
			
			.box
			{
				padding: 15px 0 0 15px;
				float: left;
			}
			
			.pic
			{
				padding: 10px;
			}
			
			.Img
			{
				width: 280px;
				height: auto;
			}

		</style>
	</head>
	<body>
		<div id="main">
			<div class="box">
				<div class="pic">
					<img src="img/0.jpg" class="Img" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/1.jpg" class="Img" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/2.jpg" class="Img" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/3.jpg" class="Img" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/4.jpg" class="Img" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/5.jpg" class="Img" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/6.jpg" class="Img" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/7.jpg" class="Img" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/8.jpg" class="Img" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/9.jpg" class="Img" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/10.jpg" class="Img" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/11.jpg" class="Img" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/12.jpg" class="Img" />
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/13.jpg" class="Img" />
				</div>
			</div>
		</div>
		<script>
			window.onload=function(){
				load();
				var dataInt={"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'}]};
				window.onscroll=function(){
					if(jia()){
						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';
							oParent.appendChild(oBox);
							var oImg=document.createElement('img');
			                oImg.src='img/'+dataInt.data[i].src;
			                oImg.className='Img';
			                oBox.appendChild(oImg);
						}
						load();
					}
				}
			}
			function load(){
				var main = document.getElementById("main");
				//取出所有的box
				var box = document.getElementsByClassName("box");
				//计算页面显示的列数(页面宽/box的宽度)
				var oBoxW = box[0].offsetWidth;//每列的宽度
				//总宽度/每列的宽度=列数
				var allW = Math.floor(document.documentElement.clientWidth/oBoxW);
				//图片的高
				var hArr = [];
				//存储第一行的图片的高
				for(var i=0;i<box.length;i++){
					if(i<allW){ 
						hArr.push(box[i].offsetHeight);
					}else{
						var minH = Math.min.apply(null,hArr);
						//获取所处理图片的左边距
						var leftW = getL(hArr,minH);
						box[i].style.position='absolute';
						box[i].style.top=minH+'px';
						box[i].style.left=leftW*oBoxW+'px';
						hArr[leftW]+=box[i].offsetHeight;
					}
				}
			}
			function getL (arr,min){
				for(var i in arr){
					if(arr[i]==min){
						return i;
					}
				}
			}
			function jia(){
				var main = document.getElementById("main");
				//取出所有的box
				var box = document.getElementsByClassName("box");
				var lastBoxH=box[box.length-1].offsetTop+Math.floor(box[box.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;
			}
		</script>
	</body>
</html>

解释一下我在写这个的时候经常出现的问题

1.函数逻辑不清楚，在我看来这个代码中的核心函数是load()函数以及jia()函数。

i.关于load()函数：

首先，取出所有的box,计算一下当前页面所显示的列数，因为我们在css样式里给了图片固定的宽度，所以用页面宽/图片宽度即可，获取到第一行图片的高度并存储下来。接下来就可以开始for循环了，为每一个预处理的图片获取其左边距，排列完你所插入的全部图片。得到如下样子：

2.接下来我们要做的就是加载函数jia();

onscroll事件:当浏览器滚动条滚动时会触发 onscroll 事件，通常情况下指上下滚动条滚动。需要注意的是，浏览器一旦检测到滚动条发生滚动，就可以触发 onscroll 事件，而无需等到滚动行为结束,接下来做的就是给你所创建的新的图片设置内容了--dataInt.这样就实现了瀑布流的全部效果。

Q___Narcissus

关注

1
点赞
踩
1

收藏

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

首先，给大家解释一下什么是瀑布流，这样来说吧！在逛淘宝的时候，我们无限下滑，就会加载出新的东西，这就是瀑布流。今天呢，我给大家介绍原生JS实现的：原生JS的方式：(首先附上代码，为了方便观看，我将CSS/HTML/JS写在了一起) &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"...
复制链接

扫一扫