以下瀑布流效果增加了本地加载数据的功能，实际上加载更多的图片应该通过网络进行获取，这里只是进行了本地图片传送的模拟。
目录结构如下：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS瀑布流效果——布局</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/app.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/8.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/9.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/8.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/9.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/8.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/9.jpg">
</div>
</div>
</div>
</body>
</html>style.css
*{
margin: 0px;
padding: 0px;
}
#container{
position: relative;
/*width: 900px;
overflow: hidden;*/
}
.box{
padding: 5px;
float: left;
}
.box_img{
padding: 5px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
.box_img img {
width: 150px;
height: auto;
}app.js
window.onload = function() {
imgLocation("container","box");
//加载数据——模拟数据，使用json字符串进行传输
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":"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":"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":"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"}]};
//实现下滑动、自动加载
//监听滚动条
window.onscroll = function() {
if(checkFlag("container","box")) {
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 = "img/"+imgData.data[i].src;
boximg.appendChild(img);
}
imgLocation("container","box");
}
}
}
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:0 auto";
var BoxHeightArr = [];
for(var i = 0; i < ccontent.length; i++) {
//BoxHeightArr[i] = content[i].offsetHeight;
//console.log(BoxHeightArr[i]);
if(i<num) {
BoxHeightArr[i] = ccontent[i].offsetHeight;
}
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].offsetWidth * minIndex+"px";
ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
BoxHeightArr[minIndex] += ccontent[i].offsetHeight;
}
}
}
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;
}
//得到一行中最小高度图片的位置
function getminHeightLocation(BoxHeightArr, minHeight) {
for(var i in BoxHeightArr) {
if(BoxHeightArr[i] == minHeight)
return i;
}
}
function checkFlag(parent, content) {
var cparent = document.getElementById(parent);
var ccontent = getChildElement(cparent,content);
var lastContentHeight = ccontent[ccontent.length-1].offsetTop; //距页面顶部的距离
//console.log(lastContentHeight);
//页面被“卷”的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//当前页面的高度
var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
if(lastContentHeight <= scrollTop + pageHeight) {
return true;
}
return false;
}运行结果如下：
719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
