js实现瀑布流布局

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>

posted on 2019-07-10 18:16  longlongcheng  阅读(2099)  评论(0)    收藏  举报

导航