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

javascript实现瀑布流效果

2016-01-31 14:23 661 查看

所谓瀑布流效果：随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，数据块就好像瀑布一样永远流不完，所以叫瀑布流。

目前比较出名的用瀑布流布局的就是蘑菇街和堆糖。

http://www.mogujie.com/

http://www.duitang.com/

大家可以自行去欣赏一下。

index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="scripts/script.js"></script>
<title>瀑布流</title>
</head>
<body>
<div id="main">
<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 class="box">
<div class="pic">
<img src="images/5.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/9.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/12.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/13.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/14.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/15.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/16.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/22.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/23.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/24.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/25.jpg"/>
</div>
</div>
</div>
</body>
</html>

/**
* Created by Administrator on 2015/10/26.
*/
window.onload=function(){
waterfall('main','box');
var dataInt={"data":[{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]};
window.onscroll=function(){
if(checkScrollSlide){
//数据块渲染
//数据块读取，将图片加入网页中
console.log('loading');
var oParent=document.getElementById('main');
var len=dataInt.data.length;
console.log("len:"+len);
for(var i=0;i<dataInt.data.length;i++){
console.log('loading:img');
//将图片塞到pic 的div 先塞到box的div
var oBox=document.createElement('div');
oBox.className='box';
oParent.appendChild(oBox);
var pic=document.createElement('div');
pic.className='pic';
oBox.appendChild(pic);
var oImg=document.createElement('img');
oImg.src="images/"+dataInt.data[i].src;
pic.appendChild(oImg);
}
waterfall('main','box');
}
}
};
function waterfall(parent,box){
var oParent=document.getElementById(parent);
var oBox=getByClass(oParent,box);
var oBoxw=oBox[0].offsetWidth;
//获取列数
var cols=Math.floor(document.activeElement.clientWidth/oBoxw);
console.log(cols);
//设置main的宽
oParent.style.cssText='width:'+oBoxw*cols+'px;margin:0 auto;'
//实现图片排序问题
var hArr=[];
for(var i=0;i<oBox.length;i++){
if(i<cols){
hArr.push(oBox[i].offsetHeight);//遍历oBox，并将oBox的高存入hArr数组
}
else{
var minH=Math.min.apply(null,hArr);//对hArr数组求最小值
var index=getMinhIndex(hArr,minH);
//console.log(index);
oBox[i].style.position='absolute';
oBox[i].style.top=minH+'px';
oBox[i].style.left=oBoxw*index+'px';
hArr[index]+=oBox[i].offsetHeight;//关键，需要对数组重新进行修改，加进去的图片相当于高度增加
}
}
console.log(hArr);
}
function getByClass(parent, clsName){
var boxArr=new Array();
var oElements=parent.getElementsByTagName('*');
for(var i=0;i<oElements.length;i++){
if(oElements[i].className==clsName){
boxArr.push(oElements[i]);
}
}
return boxArr;
}
function getMinhIndex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}

function checkScrollSlide(){
var oParent=document.getElementById('main');
var oBox=getByClass(oParent,'box');
var lastBoxH=oBoxs[oBox.length-1].offsetTop+Math.floor(oBox[oBox.length-1].offsetHeight/2);
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
console.log(scrollTop);
var height=document.body.clientHeight||document.documentElement.clientHeight;
return (lastBoxH < scrollTop+height) ? true:false;
}

这里转载一篇讲得好的瀑布流

http://ued.taobao.org/blog/2011/09/waterfall/

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

标签：

相关文章推荐

新的分享

章节导航