原生JS实现瀑布流

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

今天呢,我给大家介绍原生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.这样就实现了瀑 布流的全部效果。

 

 

 

展开阅读全文

没有更多推荐了,返回首页