模拟瀑布流-白红宇

模拟瀑布流

阅读量：4986 次

发布时间：2019-06-12

本文共 4816 字，大约阅读时间需要 16 分钟。

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

	.box {
	float: left;
	border: 1px solid #ccc;
	padding: 5px;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<!--(.box>img[src="images/P_00$.jpg"])*9-->
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	<div class="box"><img src="" alt=""/></div>
	</div>
	<script>
	//因为涉及到了图片宽高所以要写在window.onload里面

	//第一行是通过左浮动自然摆放
	//后面是通过JS计算高度最小的那一行然后把图片放到那个位置
	window.onload = function () {
	//找人
	var container = document.getElementById("container");
	var boxes = container.children;//所有的盒子
	//1.找出谁是第一行
	//计算第一行有多少张或者也就是页面上有多少列
	//一行有多少张实际上就是页面的宽度 / 盒子的宽度
	//页面宽度
	var pageWidth = window.innerWidth;
	//盒子的宽度
	var boxWidth = boxes[0].offsetWidth;
	var column = Math.floor(pageWidth / boxWidth);//都是整数所以要向下取整
	//console.log(column);
	//2.用一个数组保存每一列的高度找出最小值和最小值的索引
	var arrHeight = [];
	//把每一列的初始高度保存到数组中
	function waterfall() {
	//找出所有的盒子并处理
	for (var i = 0; i < boxes.length; i++) {
	//先只找出第一行的所有的盒子
	if (i < column) {
	//boxes[i]//第一行的盒子
	//把第一行的盒子的高度放到数组中
	arrHeight[i] = boxes[i].offsetHeight;
	} else {
	//第一行盒子之后的盒子
	//根据保存每行高度的数组中的最小值去摆放
	var minHeight = getMin(arrHeight).value;//最小的高度
	var minHeightIndex = getMin(arrHeight).index;//高度最小的那一列
	//摆放盒子其实就是设置盒子的top和left
	//要想设置位置先要加定位
	boxes[i].style.position = "absolute";
	//设置top值 top值就是高度最小的那一列现在的高度
	boxes[i].style.top = minHeight + "px";
	//设置left值 left值就是高度最小的那一列所有图片的offsetLeft
	//其中第一行的最好找
	boxes[i].style.left = boxes[minHeightIndex].offsetLeft + "px";
	//放置图片后当前列的高度发生了变化我们要对数组的值进行更新
	//然后后续的循环才能根据新的数组来重新寻找最小值

	//给数组中之前数值最小的那一项加上当前这个图片的高度
	//在之前的高度的基础上再加上新加入的图片的高度
	arrHeight[minHeightIndex] = minHeight + boxes[i].offsetHeight;
	}
	}
	}

	waterfall();
	//console.log(arrHeight);
	//console.log(minHeight);
	//console.log(minHeightIndex);

	//5.判断触底
	window.onscroll = function () {
	if (bottomed()) {
	//alert("触底了,要加载图片了");
	//加载图片
	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"},
	];
	//.box>img
	for (var i = 0; i < json.length; i++) {
	//json[i]//每一条数据
	var div = document.createElement("div");
	div.className = "box";
	container.appendChild(div);
	var img = document.createElement("img");
	img.src = json[i].src;
	div.appendChild(img);
	//新加载出来的盒子样式有问题需要重新通过JS设置位置
	waterfall();

	}
	}
	};

	function bottomed() {
	//窗口的高度+页面被卷去的头部 > 最后一个盒子的offsetTop
	//窗口的高度
	var clientHeight = window.innerHeight;
	//页面被卷去的头部
	var scrollTop = window.pageYOffset;
	//最后一个盒子的offsetTop
	var lastBox = boxes[boxes.length - 1];//最后的盒子
	var lastBoxTop = lastBox.offsetTop;
	//窗口的高度+页面被卷去的头部 > 最后一个盒子的offsetTop
	if (clientHeight + scrollTop > lastBoxTop) {
	return true;//表示触底了
	}
	return false;//没有触底
	}

	};


	function getMin(arr) {
	var min = {};
	min.index = 0;//最小值的索引
	min.value = arr[min.index];//最小值的值
	//遍历数组一个一个比较
	for (var i = 0; i < arr.length; i++) {
	if (min.value > arr[i]) {
	min.value = arr[i];
	min.index = i;
	}
	}
	return min;
	}

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