JS瀑布流效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS瀑布流效果</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#container {
position: relative;
}
.box {
padding: 5px;
float: left;
}
.box_img {
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
.box_img img {
width: 150px;
height: auto;
}
</style>
</head>
<body>
<div id="container">
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>
</div>
<script>
window.onload = function () {
imgLocation("container", "box");
var imgData = {
"data": [{ "src": "1.jpg" }, { "src": "2.jpg" }, { "src": "3.jpg" }, { "src": "4.jpg" }, { "src": "5.jpg" },
{ "src": "6.jpg" }, { "src": "7.jpg" }, { "src": "8.jpg" }, { "src": "9.jpg" }, { "src": "10.jpg" }]
};
window.onscroll = function () {
if (checkFlag()) {
var cparent = document.getElementById("container");
for (var i = 0; i < imgData.data.length; 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 img = document.createElement("img");
img.src = "/Scripts/img/img1/" + imgData.data[i].src;
boximg.appendChild(img);
}
imgLocation("container", "box");
}
}
}
function checkFlag() {
var cparent = document.getElementById("container");
var ccontent = getChildElement(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;
}
}
function imgLocation(parent, content) {
//将parent下的所有的content全部取出
var cparent = document.getElementById(parent);
var ccontent = getChildElement(cparent, content);
console.log(ccontent);
var imgWidth = ccontent[0].offsetWidth;
var num = Math.floor(document.documentElement.clientWidth / imgWidth);
cparent.style.cssText = "width:" + imgWidth * num + "px;margin:0px auto;";
var boxHeightArr = [];
for (var i = 0; i < ccontent.length; i++) {
if (i < num) {
boxHeightArr[i] = ccontent[i].offsetHeight;
console.log(boxHeightArr[i]);
}
else {
var minHeight = Math.min.apply(null, boxHeightArr);
var minIndex = getMinHeightLocation(boxHeightArr, minHeight);
ccontent[i].style.position = "absolute";
ccontent[i].style.top = minHeight + "px";
ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
boxHeightArr[minIndex] = boxHeightArr[minIndex] + ccontent[i].offsetHeight;
}
}
}
function getMinHeightLocation(BoxHeightArr, minHeight) {
for (var i in BoxHeightArr) {
if (BoxHeightArr[i] == minHeight) {
return i;
}
}
}
function getChildElement(parent, content) {
var contentArr = [];
var allConnect = parent.getElementsByTagName("*");
for (var i = 0; i < allConnect.length; i++) {
if (allConnect[i].className == content) {
contentArr.push(allConnect[i]);
}
}
return contentArr;
}
</script>
</body>
</html>
