您的位置：首页 > Web前端 > JavaScript

#学习笔记#(28)+JS瀑布流-滚动条下拉加载图片

2016-01-29 00:55 661 查看
waterfall.html

<html>
<head>
<title>瀑布流布局</title>
<meta charset="gb2312"/>
<link type="text/css" rel="stylesheet" href="style2.css"/>
<script src="javascript2.js"></script>
</head>
<body>
<div id="main"><!--放置所有图片的容器，设置id方便js获取元素-->
<div class="box"><!--每张图片用一个box装载-->
<div class="pic"><!--在这里放置图片，并设置图片的样式-->
<img src="images/0.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/0.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/9.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/11.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/12.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/13.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/14.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/15.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/16.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/17.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/18.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/19.jpg"></img>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20.jpg"></img>
</div>
</div>
</div>
</body>
</html>
javascript.js

window.onload=function(){
waterfall("main","box");
var imgs={//用json格式模拟从数据库后台抽取出的图片数组
"data":
[
{"src":"0.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":"10.jpg"},
{"src":"11.jpg"},
{"src":"12.jpg"},
{"src":"13.jpg"}
]
}
window.onscroll=function(){
if(checheScrollSlide){
var oparent=document.getElementById("main");
//将数据块渲染到当前页面的尾部
for(var i=0;i<imgs.data.length;i++){
//创建class=box的div元素
var oBox=document.createElement("div");
oBox.className="box";
oparent.appendChild(oBox);
//创建class=pic的div元素
var oPic=document.createElement("div");
oPic.className="pic";
oBox.appendChild(oPic);
//创建图片img
var oImg=document.createElement("img");
oImg.src="images/"+imgs.data[i].src;
oPic.appendChild(oImg);
}
//将加载的图片进行瀑布流排列
waterfall("main","box");
}
}
}
//瀑布流原理：计算出页面总共有多少列，从第二列起，将图片依次放在总高度最小的那一列下面
function waterfall(parent,box){
//1 获取所有装载图片的box
var oparent=document.getElementById(parent);
var oBoxs=getElementByClass(oparent,box);//传入父元素和类名
//2 获取页面宽度
var docWidth=document.documentElement.clientWidth;
//3 获取box宽度
var boxWidth=oBoxs[0].offsetWidth;
//4 计算出列数
var cols=Math.floor(docWidth/boxWidth);
//5 设置页面宽度、居中显示
oparent.style.cssText="width:"+cols*boxWidth+"px;margin:0px auto;";
//6 瀑布流排列
var hArr=[];//存放每一列的高度
for(var i=0;i<oBoxs.length;i++){
//6.1 设置第一列样式
if(i<cols){
hArr.push(oBoxs[i].offsetHeight); //保存第一列的图片高度
}else{ //6.2 设置从第二列起的样式
//找出高度最小的那一张图片的是第几张:index
var minH=Math.min.apply(null,hArr);
var index=getIndex(hArr,minH);
//将下一张图片用绝对定位设置，排列在高度最小的图片下面，并计算此时的列高
oBoxs[i].style.position="absolute";
oBoxs[i].style.top=minH+"px";
oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";
hArr[index]+=oBoxs[i].offsetHeight;
}
}
}
function getElementByClass(oparent,clsname){
var oElements=oparent.getElementsByTagName("*");//获取oparent下的所有子元素
var oBoxs=[];
for(var i=0;i<oElements.length;i++){
if(oElements[i].className==clsname)
oBoxs.push(oElements[i]);
}
return oBoxs;
}
function getIndex(arr,val){
for(var i=0;i<arr.length;i++)
if(arr[i]==val)
return i;
}
//检测是否具备了滚动加载数据块的条件
function checheScrollSlide(){
var oparent=document.getElementById("main");
var oBoxs=getElementByClass(oparent,"box");
//最后一个Box所在列的高度+最后一个box高度的一半
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight);
//滚动条拖动的距离（注意混杂模式document.body.scrollTop和标准模式document.documentElement.scrollTop）
var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
//浏览器可视窗口的高度（注意混杂模式和标准模式）
var height=document.body.clientHeight || document.documentElement.clientHeight;
return(lastBoxH<scrollTop+height)?true:false;//当滚动条下拉到图片的时候

}


style.css

*{
margin:0px;
padding:0px;
}
#mian{
position:relative;
}
.box{
float:left;
padding:15px 0px 0px 15px;
}
.pic{
padding:10px;
border:1px solid #ccc;
border-radius:5px;
box-shadow:0 0 5px #ccc;
}
.pic img{
width:165px;
height:auto;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航