JavaScript的瀑布流效果的详解及实现

一、什么是瀑布流？

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

二、瀑布流的特点

1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。
2、唯美：图片的风格以唯美的图片为主。

3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。

三、瀑布流的举例

百度图片：http://image.baidu.com

四、瀑布流的JS实现：

1、设计思路：

要想完成一个页面的瀑布流效果需要完成以下三个效果：

1）实现一行中图片的个数固定：一行图片的个数=窗口宽度/图片的固定宽度

2）每一行中加入的图片位置应是上一行长度最短的图片的下方：找到上一行高度最小的图片，插入当前图片，将高度最小的图片的高度+插入的当前图片的高度作为图片盒子的新高度，再去与其他盒子进行比较，再找到最小的高度，将新图片继续插入，如此循环。

3）用户向下拖动，在最后一幅图片出现之前加载新图片：判断是否到达最后一幅图片，将图片元素添加进去。

2、代码实现

1）JS实现

window.οnlοad=function(){
    getFirstLineWidth("container","boxer");
    var imageScr=new Array();
    for(var i=10;i<98;i++){
        var scr="images/"+i+".jpg";
        imageScr.push(scr);
    }
    window.οnscrοll=function(){
        if(isAddPosition()){
            var parent=document.getElementById("container");
            for(var i=0;i<imageScr.length;i++){
                var newDiv=document.createElement("div");
                newDiv.className="boxer";
                parent.appendChild(newDiv);
                var newImage=document.createElement("img");
                newImage.src=imageScr[i];
                newDiv.appendChild(newImage);
            }
            getFirstLineWidth("container","boxer");
        }
    }
}
function getFirstLineWidth(parent,className){
    var pid = document.getElementById(parent);
    var divObject=getDivObject(pid,className);
    var divWidth=divObject[0].offsetWidth;
    var num=Math.floor(document.documentElement.clientWidth/divWidth);
    pid.style.cssText="width:"+divWidth*num+"px;margin:0 auto;"
    var minImageHeight=insertImage(divObject,num);
}

function insertImage(divObject,num){
    var arr=new Array();
    for(var i=0;i<divObject.length;i++){
        if(i<num){
            arr.push(divObject[i].offsetHeight);
        }
        else{
            var minImageHeight = Math.min.apply(null,arr);
            var minIndex=minHeightIndex(arr,minImageHeight);
            divObject[i].style.position='absolute';
            divObject[i].style.top=minImageHeight+"px";
            divObject[i].style.left=divObject[minIndex].offsetLeft+"px";
            arr[minIndex]+=divObject[i].offsetHeight;
        }
    }
}

/*
 *通过父级和子元素的class类 获取该同类子元素的数组
 */
function getDivObject(parent,className){
   var pId =  parent.getElementsByTagName("*");
    var arr=new Array();
   for(var i in pId){
    if(pId[i].className==className)
        arr.push(pId[i]);
   }
    return arr;
}

//最小高度位置的索引
function minHeightIndex(arr,minImageHeight){
    for(var i in arr)
        if(arr[i]==minImageHeight)
            return i;
}

//检测是否到达了加载的位置
function isAddPosition(){
    var parent=document.getElementById("container");
    var divObject = getDivObject(parent,"boxer");
    var trigger=divObject[divObject.length-1].offsetTop;
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
    var documentH=document.documentElement.clientHeight||document.body.clientHeight;//页面高度
    var nowPosition=scrollTop+documentH;
    return (trigger<nowPosition)?true:false;
}

3、效果展示