标签：
html代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流</title>
<link href="css/Index.css" rel="stylesheet" />
<script src="js/Index.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box-img">
<img src="images/1.jpg" />
</div>
</div>
<!-- <div class="box">
<div class="box-img">
<img src="images/2.jpg" />
</div>
</div>-->
... ... <!--很多个图片盒子-->
</div>
</body>
</html>
CSS代码:
* {
margin: 0px;
padding: 0px;
}
#container {
position: relative;
}
.box {
float: left;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.box-img img {
width: 200px;
height: auto;
box-shadow: 0px 0px 10px black;
-o-shadow: 0px 0px 10px black;
-moz-shadow: 0px 0px 10px black;
-ms-shadow: 0px 0px 10px black;
-webkit-shadow: 0px 0px 10px black;
}
js代码:
window.onload = function () {
//自动加载数据源
var imgData = { "data": [{ "src": "1.jpg" }, { "src": "2.jpg" }, { "src": "3.jpg" }, { "src": "4.jpg" }, { "src": "5.jpg" }, { "src": "6.jpg" }] };
imgLocation("container", "box");
window.onscroll = function () {
if (getFlag() == true) {
var cparent = document.getElementById("container");
for (var i = 0; i < imgData.data.length; i++) {
//循环创建这些节点
// <div class="box">
// <div class="box-img">
// <img src="images/1.jpg" />
// </div>
// </div>
var ccontent = document.createElement("div");
ccontent.className = "box";
cparent.appendChild(ccontent);
var box_img = document.createElement("div");
box_img.className = "box-img";
ccontent.appendChild(box_img);
var img = document.createElement("img");
img.src = "images/" + imgData.data[i].src;
box_img.appendChild(img);
}
//重新遍历所有子节点
imgLocation("container", "box");
}
}
}
//返回是否开始加载图片
function getFlag() {
var cparent = document.getElementById("container");
var ccontent = getChildElement(cparent, "box");
//获取最后一张图距离顶部的距离
var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;
//获取滚动条滚动高度
var scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
//获取可视区域的高度
var pageHeight = document.body.clientHeight || document.documentElement.clientHeight;
//如果最后那张图片距离顶部的距离<滚动高度+可视区域高度,则可以开始继续加载
if (lastContentHeight < scrollHeight + pageHeight) {
return true;
}
}
//放置图片位置的方法
function imgLocation(parent, content) {
//父级div对象
var cparent = document.getElementById(parent);
//通过getChildElement(父级div对象,子节点类选择器)方法获取需要的子节点
//getChildElement()方法返回特定子节点数组
var ccontent = getChildElement(cparent, content);
//获取图片盒子的宽度
var imgWidth = ccontent[0].offsetWidth;
//计算显示屏幕一排最多能显示图片的总数(向下取整)
var num = Math.floor(document.documentElement.clientWidth / imgWidth);
//通过num计算父级盒子的总宽度并将其居中显示
cparent.style.cssText = "width:" + imgWidth * num + "px;margin:0px auto;";
//声明一个数组存放所有图片的高度
var imgHeightArr = [];
//遍历子节点
for (var i = 0; i < ccontent.length; i++) {
if (i < num) {
//起初一排的图片
imgHeightArr[i] = ccontent[i].offsetHeight;
} else {
//获取上面存放入imgHeightArr[]的图片最小高度
var minHeight = Math.min.apply(null, imgHeightArr);
//获取高度最小的图片索引
//getMinHeightLocation()方法返回高度最小的图片索引
var minIndex = getMinHeightLocation(imgHeightArr, minHeight);
//换行后的图片定位
ccontent[i].style.position = "absolute";
ccontent[i].style.top = minHeight + "px";
ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
//改变最低高度图片的高度
imgHeightArr[minIndex] = imgHeightArr[minIndex] + ccontent[i].offsetHeight;
}
}
}
//返回高度最小图片的索引
function getMinHeightLocation(imgHeightArr, minHeight) {
for (var i in imgHeightArr) {
if (imgHeightArr[i] == minHeight) {
return i;
}
}
}
//返回子节点数组
function getChildElement(parent, content) {
var contentArr = [];
var allContent = parent.getElementsByTagName("*");
for (var i = 0; i < allContent.length; i++) {
//如果子节点的className等于指定的类名
if (allContent[i].className == content) {
//将其添加至子节点数组
contentArr.push(allContent[i]);
}
}
return contentArr;
}
标签：
原文地址：http://www.cnblogs.com/lingchuang/p/4471814.html
