瀑布布局

最新推荐文章于 2024-08-01 15:19:04 发布
weixin_45615659
最新推荐文章于 2024-08-01 15:19:04 发布
阅读量67
点赞数
文章标签：实习
本文链接：https://blog.csdn.net/weixin_45615659/article/details/102608920
版权
瀑布布局

<!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>

	<script>
		window.onload = function() {
			/*
				分析 :
					1.获取itemBox的宽度
					2.获取item的宽度
					3.求出列数   itemBox的宽度 / item的宽度
					4.求出间距   (总宽度 - 元素个数* 元素宽度) /  (列数 - 1)
					5.实现瀑布流布局
					6.滚动页面时 加载数据
			*/
			// 0.获取元素
			var itemBox = document.getElementById('itemBox');
			var items = document.getElementsByClassName('item');
			// 1.获取itemBox的宽度
			var itemBoxWidth = itemBox.offsetWidth;
			// 2.获取item的宽度
			var itemWidth = items[0].offsetWidth;
			// 写一段  调试一段
			console.log(itemBoxWidth + '   ' + itemWidth);
			// 3.求出列数   itemBox的宽度 / item的宽度
			var column = parseInt(itemBoxWidth / itemWidth); 
			console.log(column);
			// 4.求出间距   (总宽度 - 元素个数* 元素宽度) /  (列数 - 1)
			var distance = (itemBoxWidth - column * itemWidth) / (column - 1);
			// 5.实现瀑布流布局   预编译
			// 5.1 定义一个数组 存放每列高度
			var arr = [];   
			waterFull();
			function waterFull() {
				//遍历item数组  给每一个元素指定位置  使其实现瀑布流布局
				for (var i = 0; i < items.length; i++) {
					if (i < column) {
						//强调  强调  强调  属性值必须是字符串
						// 第一行的left = (元素宽度 + 间距) * （列数 - 1)
						items[i].style.left = (itemWidth + distance) * i + 'px'; 
						arr[i] = items[i].offsetHeight;
					} else {
						//找到最小高度的列以及他的索引  对象封装多个属性
						var minH = getMin(arr).minH;
						var minI = getMin(arr).minI;
						//最小高度列 的left = (元素宽度 + 间距） * 索引
						items[i].style.left = (itemWidth + distance) * minI + 'px';
						//top = minH + 间距
						items[i].style.top = minH + distance + 'px';
						//更新 列的高度  = 原来的高度 + 新元素的高度 + 间距
						arr[minI] = minH + distance + items[i].offsetHeight;
					}
				}
			}

			// 获取最小列的索引和高度  代码不规范 亲人泪两行
			function getMin(arr) {
				var obj = {};  //花括号 表示对象   obj {minH: 20, minI:2}
				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;
			}
			// 6.滚动页面时 加载数据  事件是页面滚动 
			window.onscroll = function() {
				// 判断 页面元素是否足够   滚动的距离 + 页面的高度 > minH
				if (window.pageYOffset + window.innerHeight > getMin(arr).minH) {
					//新元素 其实是一张图片   src   src不同
					//数据源
					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;
						//   json[0].src     { "src": "../images/P_000.jpg" }
						div.appendChild(img);
						itemBox.appendChild(div);
					}
					waterFull();
				}
			}

		}
	</script>
</body>
</html>