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

利用JavaScript制作瀑布流

2016-05-17 16:44 661 查看

今天看了网上老师关于瀑布流的教程，学习做了一个，效果如下：

（1）页面布局：

瀑布流的特点是每一个图片块等宽不等高

每一个图片块是由三部分包裹组成：

1.一个大的div，className为box，它有内边距padding，用于里面小的div之间的间隔，（用padding不用margin的原因是：js获取数据块的高度时（ offsetHeight）包括图片所在的盒子高度和数据块间的距离 offsetHeight包含padding的值而不能将margin的值计入在内），如图所示：

2.大div里面的小div，className为pic；

3.pic里面的图片img

<body>
<div id="main">
<div class="box">
<div class="pic"><img src="images/0.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/1.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/2.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/3.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/4.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/5.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/6.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/7.jpg" alt=""></div>
</div>

*{
margin:0;
padding: 0;
}
.main{
position: relative;
}

/* 用padding而不用换margin的原因：js获取数据块的高度时（ offsetHeight） 包括图片所在的盒子高度和数据块间的距离
offsetHeight包含padding的值而不能将margin的值计入在内 */
.box{
padding: 15px 0 0 15px;
float:left;
}

.pic{
padding: 10px;
border: 1px solid gray;
border-radius: 5px;
box-shadow: 0 0 5px gray;
}
/* 瀑布流的特点是等宽不等高 */
.pic img{
width: 165px;
height: auto;
}

（2）实现瀑布流方式排列：

瀑布流的原理是在确定第一行图片块的列数后，第二行开始，判断每一列的高度，新的图片块box放在高度最小的那一列下面，放完之后接下来的图片块也判断每一列的高度，放在高度最小的那一列下面，以此类推。

//写一个函数，用于瀑布流，两个参数：（1）父元素ID（2）每个块的class
function waterfall(parentId,boxClass)
{
//获取父元素
var oParent=document.getElementById(parentId);
//获
4000
取class为boxClass的块；
var aBoxs=getByclass(oParent,boxClass);
//为了让浏览器变大变小的时候瀑布流的列数保持不变，要计算并确定列数，并保证父元素main的宽度不变
//换句话说，就是确定列数，求出main宽度
//每个盒子的宽度
//这里的clientWidth是页面的宽度，你刷新后伸展拉索都保持不变，但你宽度变了，在刷新，就会改变
var oBoxW=aBoxs[0].offsetWidth;
//求出列数
var colsNum=Math.floor(document.documentElement.clientWidth/oBoxW);
//设置父元素的宽度
oParent.style.cssText='width:'+oBoxW*colsNum+'px;margin:0 auto;';

/*    alert(colsNum);*/
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//创建一个数组，用于保存每一列的高度，每一个块排列上去时，先判断每一列的高度，哪个最小，就放在哪个下面
var hArr=[];

for(var i=0;i<aBoxs.length;i++)
{
if(i<colsNum)
{
hArr.push(aBoxs[i].offsetHeight);
}
else
{
var minH=Math.min.apply(null,hArr);
var index=getMinhIndex(hArr,minH);//得到的就是第几个块高度中最小的
//对下一个块的位置left top进行设置
aBoxs[i].style.position='absolute';
aBoxs[i].style.top=minH+'px';
aBoxs[i].style.left=aBoxs[index].offsetLeft+'px';
//aBoxs[i].style.left=oBoxW*index+'px';
hArr[index]+=aBoxs[i].offsetHeight;
}

}
}

function getByclass(oParent,sClass){
var aResult=[];
var aEle=oParent.getElementsByTagName('*');
for(var i=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
}

//写一个函数，知道一个数组中某个元素的值，通过这个值，找到这是数组中的第几个元素
function getMinhIndex(arr,val)//第一个参数是数组，第二个参数是某元素的值
{
for(var i in arr)
{
if(arr[i]==val)
{
return i;
}
}
}

（3）实现图片加载功能：

原理：利用window.onscroll，当最下面一个图片块显示出一半的时候，开始加载新的图片，写一个判断函数来判断是否到最后一张图片一半，加载方式利用DOM操作，createElement和appendChild.

//写一个函数，用于判断是否具备了滚条加载数据库的条件
function checkScrollSlide()
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var clientH=document.documentElement.clientHeight;
var nowScrollHeight=scrollTop+clientH;
var oParent=document.getElementById('main');
var aBoxs=getByclass(oParent,'box');
var lastBoxH=aBoxs[aBoxs.length-1].offsetTop+Math.floor(aBoxs[aBoxs.length-1].offsetHeight/2);
if(nowScrollHeight>lastBoxH)
{
return true;
}
else
{
return false;
}

}
window.onload=function()
{
waterfall('main','box');

//不做连接数据库的，写一个json
var dataInt={"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':'0.jpg'},{'src':'1.jpg'},{'src':'2.jpg'}]}

window.onscroll=function()
{
if(checkScrollSlide())
{
var oParent=document.getElementById('main');
for(var i=0;i<dataInt.data.length;i++)
{
var oBox=document.createElement('div');
oBox.className='box';
oParent.appendChild(oBox);
var oPic=document.createElement('div');
oPic.className='pic';
oBox.appendChild(oPic);
var oImg=document.createElement('img');
oImg.src="images2/"+dataInt.data[i].src;
oPic.appendChild(oImg);
}
waterfall('main','box');
}
}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航