JavaScript瀑布流实现方法
HTML代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="img.css" type="text/css">
<script src="img.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="img_box">
<img src="img/3.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
CSS代码（img.css）
*{
margin: 0px;
padding: 0px;
}
#container{
position: relative;
margin: 5px auto;
}
.box{
padding: 5px;
float: left;
}
.img_box{
padding: 5px;
border: 1px solid #ccc;
box-shadow: 1px 1px 5px #ccc;
border-radius: 5px;
}
.img_box img{
width: 150px;
min-width: 150px;
height: auto;
}
JavaScript代码(img.js)
window.onload=function () {
imgLocation("container","box");
var cparent=document.getElementById("container");
//模拟数据库加载图片,默认50张
var imgData=getImgData(50);
if(checkFlag()) {
addImgData(cparent,imgData);
}
window.onscroll=function () {
var cparent=document.getElementById("container");
//向下滚动每次加载10张
var imgData=getImgData(10);
if(checkFlag()) {
addImgData(cparent,imgData);
}
}
}
var imgLocation=function (parent,content) {
//获取最大的容器
var parentBox=document.getElementById("container");
//获取当前宽带的所有项
var childList=getChildElement(parentBox,content);
//获取图片宽度
var imgWidth=childList[0].offsetWidth;
//获取页面每一排能容纳的图片数量
var cols=Math.floor(document.documentElement.offsetWidth/imgWidth);
//设置父级容器宽度
parentBox.style.cssText="width:"+cols*imgWidth+"px";
//获取所有图片的高度
var arrHeight=[];
for(var i=0;i<childList.length;i++)
{
if(i<cols)
{
arrHeight[i]=childList[i].offsetHeight;
}else {
//获取图片的最小高度
var minHeight=Math.min.apply(null,arrHeight);
var minIndex=getMinIndex(arrHeight,minHeight);
childList[i].style.position="absolute";
childList[i].style.top=minHeight+"px";
childList[i].style.left=childList[minIndex].offsetLeft+"px";
//最小高度更新
arrHeight[minIndex]=arrHeight[minIndex]+childList[i].offsetHeight;
}
}
}
//获取子元素
var getChildElement=function (parent,content) {
var childArr=[];
var allEle=parent.getElementsByTagName("*");
for (var i=0;i<allEle.length;i++)
{
if(allEle[i].className==content){
childArr.push(allEle[i]);
}
}
return childArr;
}
//获取最小高度的索引
var getMinIndex=function (arrHeight,minHeight) {
for (var i=0;i<arrHeight.length;i++){
if(arrHeight[i]==minHeight)
{
return i;
}
}
}
var getImgData=function (count) {
var imgData=[];
for(var i=0;i<count;i++){
imgData[i]="img/"+i+".jpg";
if(i>=10){
imgData[i]="img/"+i%10+".jpg";
}
}
return imgData;
}
//判断是否加载图片
var checkFlag=function () {
var parent=document.getElementById("container");
var childList=getChildElement(parent,"box");
var lastHeight=childList[childList.length-1].offsetTop;
var scrollHeight=document.documentElement.scrollTop || document.body.scrollTop;
var pageHeight=document.documentElement.clientHeight;
if(lastHeight<pageHeight+scrollHeight){
return true;
}
}
//添加图片
var addImgData=function (cparent,imgData) {
for(var i=0;i<imgData.length;i++){
var box=document.createElement("div");
box.className="box";
cparent.appendChild(box);
var img_box=document.createElement("div");
img_box.className="img_box";
box.appendChild(img_box);
var img=document.createElement("img");
img.src=imgData[i];
img_box.appendChild(img);
imgLocation("container","box");
}
}
