瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格，像花瓣网、蘑菇街、美丽说等。
瀑布流布局，有三种方法可以实现，分别是javascript、jquery和css3。
瀑布流实现方式比较：
Javascript原生方式/jquery方式
1、需要计算，列数 = 浏览器窗口宽度/图片宽度，图片定位是根据每一列的高度计算下来图片的位置；2、图片排序是按照图片计算的位置横向排列，位置是计算出来的，比较规范。
Css方式
1、不需要计算，浏览器自动计算，只需设置列宽，性能高；2、列宽随着浏览器窗口大小进行改变，用户体验不好；3、图片排序按照垂直顺序排列，打乱图片显示顺序；4、图片加载还是依靠javascript/jquery实现。
现在介绍的只是javascript方法实现：
<html>部分代码：
<!Doctype>
<html>
<head>
<title>瀑布流布局</title>
<meta= charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/script.js" ></script>
</head>
<body>
<div id="main">
<div class="box">
<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/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/17.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/18.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/19.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/21.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>
</body>
</html>
<css>部分代码：
*{margin:0;
padding:0;}
main{position:relative;}
.box{padding:15px 0 0 15px;
float:left;}
.pic{padding:10px;
border:1px solid #ccc;
border-radius:5px;
box-shadow:0 0 5px #ccc;}
.pic img{width:165px;
height:auto;}
<javascript>部分代码：
window.onload=function(){
waterfall('main','box');
var dataInt={"date":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'10.jpg'},{"src":'12.jpg'}]};
window.onscroll=function(){
if(checkScrollSlide()){
var oParent=document.getElementById('main');
//将数据块渲染到页面的尾部
for(var i=0;i<dataInt.date.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="images/"+dataInt.date[i].src;
oPic.appendChild(oImg);
}
waterfall('main','box');
}
}
}
function waterfall(parent,box){
//获取main下所有class为box的元素
var oParent=document.getElementById(parent);
var oBoxs=getByClass(oParent,box);
//计算整个页面显示的列数（即页面宽/box宽）
var oBoxW=oBoxs[0].offsetWidth; //'offsetWidth'表示对象可见的宽度
var cols=Math.floor(document.documentElement.clientWidth/oBoxW); //"Math.floor()方法用于对值进行取整"
//设置父级main的宽度，以及水平居中
oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
//取出存放每一列高度的数组
var hArr=[];
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);
}else{
var minH=Math.min.apply(null,hArr); //Math.min()方法不支持传递数组；Math.min.apply(参数1,参数2)，参数1传递作用域，参数2传递数组；
var index=getMinhIndex(hArr,minH);
oBoxs[i].style.position='absolute';
oBoxs[i].style.top=minH+'px';
oBoxs[i].style.left=oBoxW*index+'px'; //同等于oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
//设置更新添加了块框后的高
hArr[index]+=oBoxs[i].offsetHeight;
}
}
console.log(hArr);
}
//根据class获取元素
function getByClass(parent,clsName){
//获取父元素的所有子集
var oElements=parent.getElementsByTagName('*');
var boxArry=new Array(); //用来存储获取到的所有class为box的元素
//遍历子元素
for(var i=0;i<oElements.length;i++){
if(oElements[i].className==clsName){
boxArry.push(oElements[i]);
}
};
return boxArry;
}
function getMinhIndex(arr,val){
for(var i in arr){ // for in方法就是循环，一般用于遍历数组，相比较于for循环简介很多
if(arr[i]==val){
return i;
}
}
}
//检查是否具备了滚动条加载数据块的条件
function checkScrollSlide(){
var oParent=document.getElementById('main');
var oBoxs=getByClass(oParent,'box');
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);//取出最后一个box的top加上其box高度的一半
//考虑浏览器兼容性，算出标准模式下和混杂模式下的滚动出的距离大小
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//计算出在标准模式下和混杂模式下的浏览器的高度
var height=document.documentElement.clienHeight || document.body.clientHeight;
//达到指定高度后，返回true，触发waterfall()函数
return(lastBoxH<scrollTop+height)?true:false;
}
后续的两种方法还在更新中，请继续期待吧！
网友评论