016-案例（瀑布流布局）

最新推荐文章于 2023-05-25 16:25:12 发布

weixin_45615613

最新推荐文章于 2023-05-25 16:25:12 发布

阅读量105

点赞数

本文链接：https://blog.csdn.net/weixin_45615613/article/details/102605727

版权

2019 10 16

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		#itemBox {
			width: 1050px;
			margin: 0 auto;
			position: relative;
		}
		.item {
			border: 1px solid #ccc;
			padding: 4px;
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="itemBox">
		<div class="item">
			<img src="images/P_000.jpg">
		</div>
		<div class="item">
			<img src="images/P_001.jpg">
		</div>
		<div class="item">
			<img src="images/P_002.jpg">
		</div>
		<div class="item">
			<img src="images/P_003.jpg">
		</div>
		<div class="item">
			<img src="images/P_004.jpg">
		</div>
		<div class="item">
			<img src="images/P_005.jpg">
		</div>
		<div class="item">
			<img src="images/P_006.jpg">
		</div>
		<div class="item">
			<img src="images/P_007.jpg">
		</div>
		<div class="item">
			<img src="images/P_008.jpg">
		</div>
		<div class="item">
			<img src="images/P_009.jpg">
		</div>
		<div class="item">
			<img src="images/P_010.jpg">
		</div>
		<div class="item">
			<img src="images/P_011.jpg">
		</div>
		<div class="item">
			<img src="images/P_012.jpg">
		</div>
		<div class="item">
			<img src="images/P_013.jpg">
		</div>
		<div class="item">
			<img src="images/P_014.jpg">
		</div>
		<div class="item">
			<img src="images/P_015.jpg">
		</div>
		<div class="item">
			<img src="images/P_016.jpg">
		</div>
		<div class="item">
			<img src="images/P_017.jpg">
		</div>
		<div class="item">
			<img src="images/P_018.jpg">
		</div>
	</div>
	<script>
		window.onload = function() {
			//1.获取itembox宽度  2.获取item宽度  3.求出列数 
			//4.求间距 （总宽度-元素个数*元素宽度） / （列数-1）
			//5.实现瀑布流布局 5.1.定义一个数组 存放每列高度 6.滚动页面时加载数据

			var itemBox = document.getElementById('itemBox');
			var items = document.getElementsByClassName('item');
			var itemBoxWidth = itemBox.offsetWidth;
			var itemWidth = items[0].offsetWidth;
			var colum =parseInt(itemBoxWidth / itemWidth);
			var distance = (itemBoxWidth - colum *itemWidth) / (colum-1);
			var arr = [];
			waterFull();
			function waterFull() {
				//遍历item数组集合，给每一个元素指定位置 使其实现瀑布流布局
				for (var i = 0; i < items.length; i++) {
					if (i<colum) {
						//强调 属性值是字符串
						items[i].style.left = (itemWidth+distance)*i+'px';
						arr[i] = items[i].offsetHeight;
					}else{
						var minH = getMin(arr).minH;
						var minI = getMin(arr).minI;
						items[i].style.left = (itemWidth + distance) *minI+'px';
						items[i].style.top = minH+distance+'px';
						//更新列的高度 = 原来的高度+新元素的高度
						arr[minI] = minH + distance+items[i].offsetHeight;

					}
				}
			}
			function getMin(arr) {
				//获取最小列索引和高度
				var obj = {};
				obj.minH = arr[0];
				obj.minI = 0;
				for (var i = 1; i < arr.length; i++) {
					if (obj.minH > arr[i]) {
						obj.minH = arr[i];
						obj.minI = i;
					}
				}
				return obj;
			}
			//事件：页面滚动
			window.onscroll = function() {
				//判断 页面元素是否足够  滚动上午距离+页面高度 >minH
				if (window.pageYOffset + window.innerHeight > getMin(arr).minH) {
					var json = [
						{'src':'images/P_000.jpg'},
						{'src':'images/P_001.jpg'},
						{'src':'images/P_002.jpg'},
						{'src':'images/P_003.jpg'},
						{'src':'images/P_004.jpg'},
						{'src':'images/P_005.jpg'},
						{'src':'images/P_006.jpg'},
						{'src':'images/P_007.jpg'},
						{'src':'images/P_008.jpg'},
						{'src':'images/P_009.jpg'},
						{'src':'images/P_010.jpg'}
					];
					for (var i = 0; i < json.length; i++) {
						var div = document.createElement('div');
						div.className = 'item';
						var img = document.createElement('img');
						img.src = json[i].src;
						div.appendChild(img);
						itemBox.appendChild(div);
					}
					waterFull();
				}
			}
		}
	</script>
</body>
</html>