<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>瀑布流演示</title>
<link rel="stylesheet" type="text/css" href="pubu_css.css"/>
<script language="javascript" type="text/javascript" src="pubu_js.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.jpeg"></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.jpeg"></div>
</div>
<div class="box">
<div class="box_img"><img src="img/7.jpeg"></div>
</div>
<div class="box">
<div class="box_img"><img src="img/8.jpeg"></div>
</div>
<div class="box">
<div class="box_img"><img src="img/9.jpg"></div>
</div>
</div>
</body>
</html>
window.onload=function(){
imgLocation("container","box");
//使用json字符串模拟数据
var imgData={"data":[{"src":"2.jpeg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpeg"}]};
//监听滚动条
window.onscroll=function(){
if(checkFlag()){
//动态加载数据
var cparent=document.getElementById("container");
for(var i=0;i<imgData.data.length;i++){
//创建div
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 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;
}
}
//获得屏幕有多少个图片，即获得多少个div
function imgLocation(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;";//设置图片不随屏幕宽度而变化
//得到一排中所有盒子中最矮的一个，使得第二排的盒子在第一排最矮的盒子下面
var BoxHeightArr=[];
for(var i=0;i<ccontent.length;i++){
if(i<cols){
BoxHeightArr[i]=ccontent[i].offsetHeight;
//console.log(BoxHeightArr[i]);打印所有盒子的高度
}else{
var minheight=Math.min.apply(null,BoxHeightArr);//得到最小的
//设置其css属性
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;
}
}
}
//控制第二排图片的位置
function getminheightLocation(BoxHeightArr,minheight){
for(var i in BoxHeightArr){
if(BoxHeightArr[i]==minheight){//遍历盒子
return i;
}
}
}
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;
}
时间： 2024-10-11 12:52:56