瀑布流效果.jpg
HTML代码####
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" 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/001.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/002.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/003.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/004.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/005.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/006.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/007.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/008.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/009.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/010.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/011.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/012.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/013.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/014.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/015.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/016.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/017.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/018.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/019.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/020.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/021.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/022.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/023.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/024.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/025.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/026.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/027.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/028.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/029.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/030.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/031.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/032.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/033.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/034.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/035.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
CSS代码####
*{
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 #cccccc;
border-radius: 5px;
}
.box_img img{
width: 200px;
height: auto;
}
JS代码####
window.onload = function () {
imgLocation("container","box");
//模拟JSON数据
var imgData = {
"data":[
{"src":"001.jpg"},
{"src":"002.jpg"},
{"src":"003.jpg"},
{"src":"004.jpg"},
{"src":"005.jpg"},
{"src":"006.jpg"},
{"src":"007.jpg"},
{"src":"008.jpg"},
{"src":"009.jpg"},
{"src":"010.jpg"},
{"src":"011.jpg"},
{"src":"012.jpg"},
{"src":"013.jpg"},
{"src":"014.jpg"},
{"src":"015.jpg"},
{"src":"016.jpg"},
{"src":"017.jpg"},
{"src":"018.jpg"},
{"src":"019.jpg"},
{"src":"020.jpg"},
{"src":"021.jpg"},
{"src":"022.jpg"},
{"src":"023.jpg"},
{"src":"024.jpg"},
{"src":"025.jpg"},
{"src":"026.jpg"},
{"src":"027.jpg"},
{"src":"028.jpg"},
{"src":"029.jpg"},
{"src":"030.jpg"},
{"src":"031.jpg"},
{"src":"032.jpg"},
{"src":"033.jpg"},
{"src":"034.jpg"},
{"src":"035.jpg"},
]
}
window.onscroll = function () {
if (checkFlag()) {
var cparent = document.getElementById("container");
//通过追加节点的方式将JSON数据插入父级盒子成为新的图片
for (var i = 0 ;i<imgData.data.length;i++){
var newContent = document.createElement("div");
newContent.className = "box";
cparent.appendChild(newContent);
var boxImg = document.createElement("div");
boxImg.className = "box_img";
newContent.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);
var imgWidth = ccontent[0].offsetWidth;//计算图片宽度
var cols = Math.floor(document.documentElement.clientWidth/imgWidth);//图片列数
cparent.style.cssText = "width:"+imgWidth*cols+"px;margin:0 auto";//设置存放所有子盒子的父盒子的宽度、居中
//获取每行所有存放图片的子盒子的高度并存入数组boxHeightArr,然后获得每行最小高度的盒子,再将下行的第壹个图片盒子放在上行最小高度盒子下面
var boxHeightArr = [];
for (var i = 0;i<ccontent.length;i++){
if (i<cols){
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].offsetLeft+"px";
boxHeightArr[minIndex] = boxHeightArr[minIndex]+ccontent[i].offsetHeight;
}
}
}
//从父盒子当中取出所有子盒子，然后遍历所有子盒子标签，根据其类名是否与指定类名匹配并将其存入数组contentArr
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;
}
}
}
//根据父盒子内出现的最后壹张图片距离盒子顶部的高度决定是否加载新图片,true则加载，false则不加载
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;
if (lastContentHeight<scrollTop+pageHeight){
return true;
}
}
