js实现瀑布流布局

£可爱£侵袭症+ 提交于 2020-01-21 14:02:55

js实现瀑布流布局原理代码

实现功能:

1、定义函数 waterfall(parent,box) 实现瀑布流布局。
2、当拖动滚动轴时候,到底部时候会触发 添加元素事件,瀑布流布局。

瀑布流思路:第一排自由排版,记录第一排元素的高度存入数组,之后出现的元素 都会放到 数组高度最小的元素下面,
绝对定位方式(x-上面元素数组内序号*每个元素宽度 y-上面元素的高度),并且每执行一次,会重新定义高度最小的值,
之前高度加上当前元素的高度,存入数组。之后元素都如此执行。

如此每个新增元素都会放置在最小高度元素下面,也就实现瀑布流。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>瀑布流</title>
	<style type="text/css">
		*{margin: 0; padding: 0;}
		#main{
			/* width: 1000px;
			max-width: 1000px;*/
			margin :0 auto; 
			position: relative;
		}
		.box{
			float: left;
			padding: 15px 0 0 15px; 
		}
		.pic{
			padding: 15px;
			border:1px solid #ccc;
			border-radius: 10px;
			box-shadow: 0 0 5px #ccc;
		}
		.box img{
			width: 200px;
		}
	</style>
</head>
<body>
	<div id="main">

		<div class="box">
			<div class="pic">
				<img src="images/1.png">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/2.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/3.png">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/4.png">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/5.png">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/6.png">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/7.png">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/8.png">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/9.png">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/10.png">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/11.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/12.png">
			</div>
		</div>

		
	</div>
	<script type="text/javascript">
		window.onload = function(){
			waterfall('main','box');
			dataImg = {
				arr:[
				{'src':'images/1.png'},
				{'src':'images/2.jpg'},
				{'src':'images/3.png'},
				{'src':'images/4.png'},
				{'src':'images/5.png'},
				{'src':'images/6.png'},
				{'src':'images/7.png'},
				{'src':'images/8.png'},
				{'src':'images/9.png'},
				{'src':'images/10.png'},
				{'src':'images/11.jpg'}
				]
			}
			
			window.onscroll = function(){
				//当滚动到最后一张图片高度一般时刷新新数据
				var boxs = getClass('box');
				var oneh2 = boxs[boxs.length-1].offsetTop;
				var oneh = boxs[boxs.length-1].offsetHeight/2;
				var top = document.body.scrollTop || document.documentElement.scrollTop;
				var twoh = document.body.clientHeight||document.documentElement.clientHeight;

				if(oneh2+oneh<top+twoh){
					for(var i=0;i<dataImg.arr.length;i++){
						var main = document.getElementById('main');
						var cdiv = document.createElement('div');
						cdiv.className = 'box';
						var cpic = document.createElement('div');
						cpic.className = 'pic';
						var cimg = document.createElement('img');
						cimg.src =  dataImg.arr[i].src;
						main.appendChild(cdiv);
						cdiv.appendChild(cpic);
						cpic.appendChild(cimg);
					}
				}
				waterfall('main','box');
			}
		}

		function waterfall(parent,box){
			//获取main元素
			var oparent = document.getElementById(parent);

			//获取所有 box 元素
			var obox = getClass('box');

			//获取每行能放多少个 居中摆放
			var w = document.body.clientWidth||document.documentElement.clientWidth;
			//var w =1000;
			var oneWidth = obox[0].offsetWidth;
			var num = Math.floor(w/oneWidth);
			main.style.width = num*oneWidth+'px';

			//瀑布流原理  left-下标*图片width top-上面图片高
			var hrr = [];
			for(var i=0;i<obox.length;i++){
				if(i<num){
					hrr.push(obox[i].offsetHeight);
				}else{
					var min = Math.min.apply(null,hrr);
					var index = getindex(hrr,min);
					obox[i].style.position = 'absolute';
					obox[i].style.left = index*oneWidth+'px';
					obox[i].style.top = min+'px';
					hrr[index] += obox[i].offsetHeight;
				}
			}
			console.log(hrr);
		}

		//获取 数组内指定值的 序号
		function getindex(hrr,h){
			for(var i=0;i<hrr.length;i++){
				if(hrr[i]==h){
					return i;
				}
			}
		}

		//统计所有指定class名称的元素
		function getClass(a){
			var doms = document.getElementsByTagName('*');
			var reg = new RegExp('\\b'+a+'\\b');
			//var reg = '/^\b'+a+'\b$/';
			var arr = [];
			for(var i=0;i<doms.length;i++){
				if(reg.test(doms[i].className)){
					arr.push(doms[i]);
				}
			}
			return arr;
		}

	</script>
</body>
</html>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!