| |
<!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"> |
| |
|
| |
<div class="box"><img src="images/P_000.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_001.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_002.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_003.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_004.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_005.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_006.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_007.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_008.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_009.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_010.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_011.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_012.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_013.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_014.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_015.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_016.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_017.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_018.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_019.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_000.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_001.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_002.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_003.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_004.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_005.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_006.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_007.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_008.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_009.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_010.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_011.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_012.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_013.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_014.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_015.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_016.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_017.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_018.jpg" alt=""/></div> |
| |
<div class="box"><img src="images/P_019.jpg" 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> |
浙公网安备 33010602011771号