瀑布流小总结

最新推荐文章于 2024-08-29 15:02:13 发布

kaikai4

最新推荐文章于 2024-08-29 15:02:13 发布

阅读量309

点赞数

分类专栏： js

js 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

简单总结一下瀑布流的原理：
1、先规划好自己的布局，如一个页面有4列图片
2、获取这4列图片中最低的一个元素高度
3、遍历这4列元素，找出最低的一个元素
4、将要添加的图片添加到最低的元素中，将以上几步封装在一个函数里面
5、在触发滚动条滚动的时候触发这个函数
以此类推... ...
简单的瀑布流就完成了！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流布局</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.wrap {
			width: 100%;
			margin: 0 auto;
		}
		.wrap h2 {
			height: 60px;
			line-height: 60px;
			background: #333;
			color: #fff;
			padding-left: 200px;
		}
		.wrap .cont {
			width: 1000px;
			margin: 0 auto;
		}
		.cont ul {
			float: left;
			margin: 0 25px;
		}
		.cont ul li {
			width: 200px;
			height: 80px;
			background: #dcdcdc;
			margin: 10px 0;
		}
		.cont ul li.a1 {
			background: #3cf;
			height: 100px;
		}
		.cont ul li.a2 {
			background: #cf3;
			height: 180px;
		}
		.cont ul li.a3 {
			background: #fc3;
			height: 150px;
		}
		.cont ul li.a4 {
			background: #3fc;
			height: 240px;
		}
		.cont ul li.a5 {
			background: #ff00ff;
			height: 240px;
		}
		.cont ul li.a6 {
			background: #8400ff;
			height: 300px;
		}
		.cont ul li.a7 {
			background: #ff0000;
			height: 50px;
		}
		.clear {
			clear: both;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			// 先获取页面中ul中的最小高度
			function appendLi () {
				var ulList = $('.cont ul');
				var ul1_h = ulList[0].offsetHeight; 
				var ul2_h = ulList[1].offsetHeight;
				var ul3_h = ulList[2].offsetHeight;
				var ul4_h = ulList[3].offsetHeight;
				var minUl = Math.min(ul1_h, ul2_h, ul3_h, ul4_h); // 获取ul中最小的高度
				var min_ul = '';
				var lis = '';
				for (var i = 0; i < ulList.length; i++) {
					if (ulList[i].offsetHeight == minUl) {   // 比较ul中最小的一个
						min_ul = ulList[i];
					}
					lis = '<li class="a'+getRandom(10)+'"></li>';
				}
				$(min_ul).append(lis); // 最小的元素下面添加li
			}


			for (var i = 0; i < 14; i++) {  // 页面一加载就循环添加 可去掉
				appendLi();
			}
			
			// 生成随机数
			function getRandom (n){
	        	return Math.floor(Math.random()*n+1)
	        }

	        // 当滚动条滚动的时候 触发函数
			window.onscroll = function () {
				var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
				var docH = document.documentElement.offsetHeight;//整个文档高度
				var winH = document.documentElement.clientHeight;//窗口高度
				if (docH-winH-100 < scrollTop) {
					appendLi();
				}

				// 窗口的高+滚动条距离顶部的距离 = 文档的高度
				// 文档的高度 - 窗口的高度 =  滚动条距离顶部的距离
				// 文档的高度 - 窗口的高度 - 100 < 滚动条距离顶部的距离
				// 最终得到的可以用另一句话说 滚动条距离底部100像素
			}
			
		})
	</script>
</head>
<body>
	<div class="wrap">
		<h2>瀑布流展示：</h2>
		<div class="cont">
			<ul>
				<li class="a1"></li>
			</ul>
			<ul>
				<li class="a2"></li>
			</ul>
			<ul>
				<li class="a3"></li>
			</ul>
			<ul>
				<li class="a4"></li>
			</ul>
			<div class="clear"></div>
		</div>
	</div>
</body>
</html>

原文