1. 瀑布流
![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局-瀑布流</title>
<link rel="stylesheet" href="css/layout.css" />
<script src="js/layout.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img">
<a href="img/1.jpg"><img src="img/1.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/2.jpg"><img src="img/2.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/3.jpg"><img src="img/3.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/4.jpg"><img src="img/4.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/5.jpg"><img src="img/5.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/6.jpg"><img src="img/6.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/7.jpg"><img src="img/7.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/8.jpg"><img src="img/8.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/9.jpg"><img src="img/9.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/10.jpg"><img src="img/10.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/11.jpg"><img src="img/11.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/12.jpg"><img src="img/12.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/13.jpg"><img src="img/13.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/14.jpg"><img src="img/14.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/15.jpg"><img src="img/15.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/6.jpg"><img src="img/16.jpg" alt="" ></a>
</div>
</div>
</div>
</body>
<script>
window.onload = function () {
imgLocation("container", "box");
var imgData = {
"data": [
{"src": "2.jpg"}, {"src": "4.jpg"}, {"src": "6.jpg"}, {"src": "8.jpg"}, {"src": "10.jpg"}, {"src": "12.jpg"}, {"src": "14.jpg"}, {"src": "16.jpg"},
{"src": "1.jpg"}, {"src": "3.jpg"}, {"src": "5.jpg"}, {"src": "7.jpg"}, {"src": "9.jpg"}, {"src": "11.jpg"}, {"src": "13.jpg"}, {"src": "15.jpg"}
]
};
window.onscroll = function () {
if (checkFlag()) {
var cparent = document.getElementById("container");
for (var i in imgData.data) {//添加图片节点
//console.log(i);
var ccontent = document.createElement("div");
ccontent.className = "box";
cparent.appendChild(ccontent);
var boximg = document.createElement("div");
boximg.className = "box_img";
ccontent.appendChild(boximg);
var aimg = document.createElement("a");
aimg.href = "img/" + imgData.data[i].src;
boximg.appendChild(aimg);
var img = document.createElement("img");
img.src = "img/" + imgData.data[i].src;
aimg.appendChild(img);
}
imgLocation("container", "box");
}
}
};
function checkFlag() {
var cparent = document.getElementById("container");
var ccontent = getChildrenElement(cparent, "box");
var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
//console.log(lastContentHeight + ":" + scrolltop + ":" + pageHeight);
if (lastContentHeight < scrolltop + pageHeight)
return true;
}
//将content储存在数组中
function getChildrenElement(parent, content) {
var contentArr = [];
var contentAll = parent.getElementsByClassName(content);
//console.log(contentAll.length);
for (var i = 0; i < contentAll.length; i++) {//为什么这里不能用var i in contentAll
contentArr.push(contentAll[i]);
}
return contentArr;
}
//将parent下所有的content取出
function imgLocation(parent, content) {
var cparent = document.getElementById(parent);
var ccontent = getChildrenElement(cparent, content);
var imgWidth = ccontent[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth / imgWidth);
//console.log(cols);
cparent.style.cssText = "width:" + imgWidth * cols + "px;margin:0 auto";
//获取衔接点
var boxHeightArr = [];
for (var i in ccontent) {
if (i < cols) {
boxHeightArr[i] = ccontent[i].offsetHeight;
//console.log(boxHeightArr[i]);
} else {
var minHeight = Math.min.apply(null, boxHeightArr);
//console.log(minHeight);
var minIndex = getMinIndex(boxHeightArr, minHeight);
ccontent[i].style.position = "absolute";
ccontent[i].style.top = minHeight + "px";
ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
boxHeightArr[minIndex] += ccontent[i].offsetHeight;
}
}
}
function getMinIndex(boxHeightArr, minHeight) {
for (var i in boxHeightArr)
if (boxHeightArr[i] == minHeight)
return i;
return -1;
}
</script>
</html>
View Code