瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格，像花瓣网、蘑菇街、美丽说等。
瀑布流布局，有三种方法可以实现，分别是javascript、jquery和css3。
瀑布流实现方式比较：
Javascript原生方式/jquery方式
1、需要计算，列数 = 浏览器窗口宽度/图片宽度，图片定位是根据每一列的高度计算下来图片的位置；2、图片排序是按照图片计算的位置横向排列，位置是计算出来的，比较规范。
Css方式
1、不需要计算，浏览器自动计算，只需设置列宽，性能高；2、列宽随着浏览器窗口大小进行改变，用户体验不好；3、图片排序按照垂直顺序排列，打乱图片显示顺序；4、图片加载还是依靠javascript/jquery实现。
现在介绍的只是javascript方法实现：
部分代码：
*{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;}
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}
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}
//根据class获取元素
function getByClass(parent,clsName){
//获取父元素的所有子集
var oElements=parent.getElementsByTagName('*');
var boxArry=new Array(); //用来存储获取到的所有class为box的元素
//遍历子元素
for(var i=0;i}
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}
后续的两种方法还在更新中，请继续期待吧！