纯原生实现瀑布流特效

最新推荐文章于 2024-08-11 03:56:50 发布

是小王啊i

最新推荐文章于 2024-08-11 03:56:50 发布

阅读量200

点赞数

文章标签： css js html javascript dom

本文链接：https://blog.csdn.net/qq_45378970/article/details/108842614

版权

javascript 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

瀑布流的布局原理解析

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。

特点

1.瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时代，瀑布流可以提供很好的用户体验，通过结合下拉刷新，上拉加载进行数据的懒加载等操作，对于用户的体验感来说是接近于满分的！
2.其实瀑布流的特点就是参差不齐的排列方式，以及流式布局的扩展性，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动。

下面来看看瀑布流的实现代码

html代码

<div id="box">
			<ul id="one">
				<li><img src="./img/1.png" alt=""></li>
				<li><img src="./img/2.png" alt=""></li>
				<li><img src="./img/3.png" alt=""></li>
				<li><img src="./img/4.png" alt=""></li>
				<li><img src="./img/5.png" alt=""></li>
			</ul>
		</div>

css代码

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			body{
				background-color: lightgray;
			}
			#box{
				position: relative;
				width: 1210px;
				margin: 0 auto;
			}
			#box li{
				width: 230px;
				float: left;
			}
			img{
				width: 230px;
			}
			.current{
				width: 220px;
				margin: 0 5px;
				float: left;
			}
			.img{
				width: 230px;
			}
		</style>

js代码

<script type="text/javascript">
			window.onload=function(){
				function mFun$(id){
					return document.getElementById(id);
				}
				//获取所有的li
				var lis=document.querySelectorAll('li');
				// console.log(lis);
				//图片路径
				var obj={
					'a':[
						{'src':'3.png'},
						{'src':'4.png'},
						{'src':'5.png'},
						{'src':'6.png'},
						{'src':'7.png'},
					]
				}
				//封装瀑布流函数
				function fn(){
					for(var i=0;i<10;i++){
						//创建li
						var li=document.createElement('li');
						li.classList.add('current');
						//图片
						for(var b=0;b<obj.a.length;b++){
							//创建img
							var img=document.createElement('img');
							img.classList.add('img');
							img.src='img/'+obj.a[b].src;
							li.appendChild(img);    
						}
						//数组
						var arr=[];
						for(var j=0;j<lis.length;j++){
							arr.push(lis[j].offsetHeight);
						}
						//求最小高度的索引
						var minHeight=arr[0];
						var index=0;
						for(var k=0;k<arr.length;k++){
							if(minHeight>arr[k]){
								minHeight=arr[k];
								index=k;
							}
						}
						lis[index].appendChild(li);
					}
				}
				fn();
				window.onscroll=function(){
					//滚动top
					var h=document.body.scrollTop||document.documentElement.scrollTop;
					//可视区域的高度
					var c=document.body.clientHeight||document.documentElement.clientHeight;
					//div元素的高
					var hei=document.documentElement.offsetHeight;
					if(h>=(hei-c)){
						fn()
					}
				}
			}
</script>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			body{
				background-color: lightgray;
			}
			#box{
				position: relative;
				width: 1210px;
				margin: 0 auto;
			}
			#box li{
				width: 230px;
				float: left;
			}
			img{
				width: 230px;
			}
			.current{
				width: 220px;
				margin: 0 5px;
				float: left;
			}
			.img{
				width: 230px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul id="one">
				<li><img src="./img/1.png" alt=""></li>
				<li><img src="./img/2.png" alt=""></li>
				<li><img src="./img/3.png" alt=""></li>
				<li><img src="./img/4.png" alt=""></li>
				<li><img src="./img/5.png" alt=""></li>
			</ul>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				function mFun$(id){
					return document.getElementById(id);
				}
				//获取所有的li
				var lis=document.querySelectorAll('li');
				// console.log(lis);
				//图片路径
				var obj={
					'a':[
						{'src':'3.png'},
						{'src':'4.png'},
						{'src':'5.png'},
						{'src':'6.png'},
						{'src':'7.png'},
					]
				}
				//封装瀑布流函数
				function fn(){
					for(var i=0;i<10;i++){
						//创建li
						var li=document.createElement('li');
						li.classList.add('current');
						//图片
						for(var b=0;b<obj.a.length;b++){
							//创建img
							var img=document.createElement('img');
							img.classList.add('img');
							img.src='img/'+obj.a[b].src;
							li.appendChild(img);    
						}
						//数组
						var arr=[];
						for(var j=0;j<lis.length;j++){
							arr.push(lis[j].offsetHeight);
						}
						//求最小高度的索引
						var minHeight=arr[0];
						var index=0;
						for(var k=0;k<arr.length;k++){
							if(minHeight>arr[k]){
								minHeight=arr[k];
								index=k;
							}
						}
						lis[index].appendChild(li);
					}
				}
				fn();
				window.onscroll=function(){
					//滚动top
					var h=document.body.scrollTop||document.documentElement.scrollTop;
					//可视区域的高度
					var c=document.body.clientHeight||document.documentElement.clientHeight;
					//div元素的高
					var hei=document.documentElement.offsetHeight;
					if(h>=(hei-c)){
						fn()
					}
				}
			}
		</script>
	</body>
</html>