效果图
- 第一排图片加载后，接下来的每一张图片选择瀑布流6列中高度最小的一列添加，添加后修改该列的高度，随后的图片依此类推完成瀑布流
- 当浏览器滚动条下滑到当前最后一张图片时，自动继续加载图片
html代码
- 先定义一个水平居中的大盒子id=container，包含所有图片
- 每一张图片
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
- 完整html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js动态瀑布流</title>
<link type="text/css" rel="stylesheet" href="css/index.css">
<script src ="js/index.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/3.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/4.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/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/3.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/4.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>
</body>
</html>
css代码
*{
margin: 0px;
padding: 0px;
}
#container{
position: relative;
}
.box{
float: left;
padding: 5px;
}
.box_img{
padding: 5px;
border: 1px solid #aabbcc;
box-shadow:0 0 5px #cccccc;
border-radius: 5px;
}
.box_img img{
width: 200px;
height: auto;
}
js代码
-
在加载页面时就执行imgLocation函数
-
imgLocation函数
传入container和box方便获取元素(最外层大盒子和每张图片的盒子)
使用getChild函数将container盒子内部的装图片的盒子存入数组allcount
获取图片盒子的宽度(事先定义好)和浏览器窗口显示的宽度，计算出瀑布流有几列(num)，并设置container的宽度
获取第一排num个盒子的高度(存入数组fHeight，以便后来计算哪一列高度最小)，从第num+1个盒子开始就要选择盒子放置的位置(选择当前num列中高度最小的那一列，将盒子放于那一列下方，更新那一列的高度，依此类推放置好先前设定的所有图片)
至此html中预先定义好的图片形成瀑布流
-
在浏览器滚动条滚动时执行checkHeight函数
-
checkHeight函数
判断当前是否滚动到预先定义的最后一张图片
获取当前浏览器窗口高度height
获取当前滚动条滚动的高度scrollHeight
若这两项之和大于最后一张图片距浏览器顶部的高度(lastHeight)，则表示应该继续加载图片维持瀑布流利用创建元素的语句创建指定数目的图片盒子并放入图片
每当滚动条滑到当前最后一张图片时就继续加载，这样就可以使瀑布流随着滚动条的滑动一直持续
window.onload=function(){
imgLocation("container","box");
var newImgData={"data":[{"src":"2.jpg"},{"src":"9.jpg"},{"src":"6.jpg"},{"src":"4.jpg"},{"src":"8.jpg"},{"src":"1.jpg"}]};
window.onscroll=function(){
if(checkHeight())
{
var cparent=document.getElementById("container");
for(var i=0;i<newImgData.data.length;i++)
{
var newDiv=document.createElement("div");
newDiv.className="box";
cparent.appendChild(newDiv);
var boxImg=document.createElement("div");
boxImg.className="box_img";
newDiv.appendChild(boxImg);
var pImg=document.createElement("img");
pImg.src="img/"+newImgData.data[i].src;
boxImg.appendChild(pImg);
}
imgLocation("container","box");
}
}
}
function getChild(cparent,son){
var allcount =[];
var countall=cparent.getElementsByTagName("*");
for(i=0;i<countall.length;i++)
{
if(countall[i].className==son)
{
allcount.push(countall[i]);
}
}
return allcount;
}
function checkHeight(){
var height=document.documentElement.clientHeight;
var cparent=document.getElementById("container");
var allcount=getChild(cparent,"box");
var lastHeight=allcount[allcount.length-1].offsetTop;
var scrollHeight=document.documentElement.scrollTop;
if(height+scrollHeight>lastHeight)
{
return true;
}
}
function imgLocation(parent,son){
var i;
var hWeight=document.documentElement.clientWidth;
var cparent=document.getElementById(parent);
var allcount =[];
allcount=getChild(cparent,son);
var sHeight=allcount[0].offsetWidth;
var num=parseInt(hWeight/sHeight);
cparent.style.cssText="width:"+num*sHeight+"px;margin:0px auto";
var fHeight=[];
for(i=0;i<allcount.length;i++)
{
if(i<num)
{
fHeight.push(allcount[i].offsetHeight);
}
else
{
var minHeight=Math.min.apply(null,fHeight);
var index=indexMin(fHeight,minHeight);
console.log(index);
allcount[i].style.position="absolute";
allcount[i].style.top=minHeight+"px";
allcount[i].style.left=allcount[index].offsetLeft+"px";
fHeight[index]+=allcount[i].offsetHeight;
}
}
}
function indexMin(fHeight,minHeight){
for(var i=0;i<fHeight.length;i++)
{
if(fHeight[i]==minHeight)
{
return i;
}
}
}
设定第num+1个以及之后图片的位置的代码
//将position设置为绝对定位
allcount[i].style.position="absolute";
//设置此图片盒子距浏览器顶部距离
allcount[i].style.top=minHeight+"px";
//设置此图片盒子距浏览器左部距离
allcount[i].style.left=allcount[index].offsetLeft+"px";
//更新该列的高度
fHeight[index]+=allcount[i].offsetHeight;
1556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
