js瀑布流布局

浏览数：28 / 时间：2015年06月09日

瀑布流布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。

这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 —瀑布流式布局。

　　而下面是用绝对定位做的瀑布流布局

<div class="main" id="main">
        <div class="box"><div class="pic"><img src="img/1.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/2.jpg"> </div></div>
        <div class="box"><div class="pic"><img src="img/3.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/4.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/5.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/6.jpg"> </div></div>
        <div class="box"><div class="pic"><img src="img/7.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/8.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/9.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/10.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/11.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/12.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/13.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/14.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/15.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/16.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/17.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/18.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/19.jpg"></div></div>
        <div class="box"><div class="pic"><img src="img/20.jpg"></div>
        </div>
    </div>

*{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:225px;
    height:auto;
    }

// JavaScript Document

window.onload =function(){
    waterfall(‘main‘,‘box‘);
    var dataInt = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.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="img/" + dataInt.data[i].src;
                oPic.appendChild(oImg);
            }    
        }
        
    }*/
}


function waterfall(parent,box){
    var oParent  = document.getElementById(parent);
    var oBoxs = getByClass(oParent,box);    
    var boxWidth = oBoxs[0].offsetWidth;
    var cols = Math.floor(document.documentElement.clientWidth/boxWidth);
    //document.getElementsByTagName("body")[0].offsetWidth;
    //console.log(document.documentElement.clientWidth);
    oParent.style.cssText = ‘width:‘ + cols*boxWidth + "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);    
            var index= getMinhIndex(hArr,minH);
            oBoxs[i].style.cssText = ‘position:absolute;Top:‘+minH+"px;left:"+ oBoxs[index].offsetLeft+"px";
            hArr[index] += oBoxs[i].offsetHeight;
        }
        
    }
}

function getByClass(parent,className){
    var boxArr = new Array();
    var oElements = document.getElementsByTagName("*");
    for(var i=0 ; i<oElements.length;i++){
        if(oElements.item(i).className == className){
            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 oBoxs = getByClass(oParent,‘box‘);    
    var lastBoxH = oBoxs[oBoxs.length-1].offsetTop + Math.floor(oBoxs[oBoxs.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;
}