6-Day3
分析 :
- 获取itemBox的宽度
- 获取item的宽度
- 求出列数 itemBox的宽度 / item的宽度
- 求出间距 (总宽度 - 元素个数* 元素宽度) / (列数 - 1)
- 实现瀑布流布局
- 滚动页面时 加载数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
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_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() {
var itemBox = document.getElementById('itemBox');
var items = document.getElementsByClassName('item');
var itemBoxWidth = itemBox.offsetWidth;
var itemWidth = items[0].offsetWidth;
console.log(itemBoxWidth+ ' '+itemWidth);
var column = parseInt(itemBoxWidth / itemWidth);
console.log(column);
var distance = (itemBoxWidth - column*itemWidth)/(column - 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 = 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() {
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>