<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" type="text/css" href="瀑布流.css">
<script src="瀑布流.js"></script>
</head>
<body>
<div id = "container">
<div class="box">
<div class="box_img">
<img src="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="">
</div>
</div>
<div class="box">
<div box_img>
<img src="">
</div>
</div>
</div>
</body>
</html>
*{
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;
}
window.onload = function () {
imgLocation("container", "box");
var imgData = {"data": [{"src": "图片"}, {"src": "图片"}, {"src": "图片"}, {"src": "图片"}]}
window.onscroll = function () {
if (checkFlag()) {
var cparent = document.getElementById("container");
for (var i = 0; i < imgData.data.length; i++) {
var ccontent = document.createElment("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 = imgData.data[i].src
boximg.appendChild(img);
}
imgLocation("container", "box");
}
}
}
function checkFlag() {
var cparent = docement.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;
if (lastContentHeight < scrollTop + pageHeight) {
return true;
}
}
function imgLocation(parent, content) {
//将parent下的所有内容全部取出
var cparent = document.getElementById(parent);
var ccontent = getChildElement(cparent, content);
//console.log(ccontent.length);
var imgWidth = ccontent[0].offsetWidth;
var num = Math.floor(document.documentElement.clientWidth / imgWidth);
cparent.style.cssText = "width:" + imgWidth * num + "px;margin:0 auto";
var BoxHeightArr = [];
for (var i = 0; i < ccontent.length; i++) {
if (i < num) {
BoxHeightArr[i] = ccontent[i].offsetHeight;
} else {
var minHeight = Math.min.apply(null, BoxHeightArr);
//console.log(BoxHeightArr[i]);
var minIndex = getMinHeightLocation(BoxHeightArr, minHeight);
ccontent[i].style.position = "absolute";
ccontent[i].style.top = minHeight + "px";
ccontent[i].style.left = ccontent[minIndex].offsetLefta + "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 allContent = parent.getElementsByTagName("*");
for (var i = 0; i < allContent.length; i++) {
if (allContent[i].className == content) {
contentArr.push(allContent[i]);//向其末未进行追加
}
}
return contentArr;
}
