网页瀑布流效果实现详解
确定构造函数 WaterFall
确定属性 ：好多个box
确定功能 ：
初始化功能 ： 摆放每一张图片 （图片加载自动排序）
找数组中最小值的下标（按照最小高度依次排序）
操作滚动条（设置滚动条条件，图片无限加载）
css样式
* {
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#main{
position: relative; /*所有的盒子相对他来定位 的*/
width:1212px;
margin: 0 auto;
}
.box{
padding:15px 0 0 15px; /* 要获取每列高度 = 图片和图片之间的距离*/
float: left; /*块级元素水平排列*/
}
.pic{
padding: 10px;
border: 1px solid #CCCCCC;
border-radius: 5px;
box-shadow: 0 0 5px #CCCCCC; /*水平 垂直 阴影模糊程度 颜色*/
}
.pic img{
width:165px;
height: auto;
}
//HTML
<body>
<div id="main"> <!--position:relactive-->
<div class="box"> <!--position:absolute-->
<div class="pic">
<img src="images/0.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" />
</div>
</div>
</div>
</body>
<script>
onload = function(){
waterFall();//瀑布流功能
//设置滚动条事件
window.onscroll = function(){
//获取最后一个盒子的高度值
lastBoxHeight = boxs[boxs.length-1].offsetTop + boxs[boxs.length-1].offsetHeight /2
//获取窗口的文档显示区的高度。
wHeight = window.innerHeight ;
//获取滚动条的高度
sTop = document.body.scrollTop || document.documentElement.scrollTop;
if( lastBoxHeight < wHeight + sTop){//设置触发条件
//定义一个json对象，里面存放瀑布流加载的图片
var _json = {"data":[{"scr" : "1.jpg"},{"scr" : "2.jpg"},{"scr" : "3.jpg"}]}
for(var i = 0 ; i < _json.data.length ; i++){//动态创建div、pic img（将图片放入）
//创建一个div，类名为box，存放在main中
var odiv = create("div");
odiv.className = "box";
$("main").appendChild(odiv)
//创建一个div、类名pic、存放到odiv中
var opic = create("div");
opic.className = "pic";
odiv.appendChild(opic)
//创建一个img标签，将图片依次存放到img里面
var oimg = create("img");
oing.src = "images/"+_json.data[i].src
opic.appendChild(oimg);
}
waterFall()
}
}
}
function $(id){
return document.getElementById(id);
}
function creat(ele){
return document.createElement(ele);
}
//瀑布流功能
function waterFall(){
boxs = document.getElementsByClassName("box");
//获取一个盒子的宽度
boxW = boxs[0].offsetWidth;
//定义一个数组 存放每一列图片的高度值
hArr = [ ];
for(var i = 0 ; i < boxs.length ; i++){
//定义每行存放6张图片，将六张图片的高度存放到数组中
if(i < 6){
hArr.push( boxs[i].offsetHeight );
}else{
//第七张及其后的图片位置 根据数组中的最小高度确定
var minIndex = getMinHeightIndex()
//定位 第七张及其后面的图片位置
boxs[i].style.position = "absolute";
boxs[i].style.left = minIndex * boxW + "px";
boxs[i].style.top = hArr[minIndex] + "px";
//改变minIndex在数组中的高度值
hArr[minIndex] += boxs[i].offsetHeight;
}
}
}
//功能函数：获取数组最小值下标
function getMinHeightIndex(){
var minHeight = hArr[0];//假设最小值
var minHeightIndex = 0;
for( var i = 0 ; i < hArr.length ; i++){
if( hArr[i] < minHeight ){
minHeigt = hArr[i];
minHeightIndex = i;
}
}
return minHeightIndex;
}
</script>