原生JS實(shí)現(xiàn)的簡(jiǎn)單“瀑布流”布局

作者：Mr.Zheng 2012-05-02 13:53:00

自己動(dòng)手弄了段原生JS代碼，實(shí)現(xiàn)了簡(jiǎn)單的“瀑布流”布局效果，當(dāng)然肯定不能和以上那些優(yōu)秀插件相提并論，有興趣的朋友，可以去看看，希望能帶給你或多或少的收獲。

自pinterest網(wǎng)站爆紅以來，國(guó)內(nèi)一度掀起“仿PIN”狂潮，諸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到廣大網(wǎng)民的青睞。眾多知名JS庫(kù)，也相繼出現(xiàn)“瀑布流”布局插件，譬如jQuery的Masonry插件、KISSY的waterfall插件等。

今天閑來無聊，我也自己動(dòng)手弄了段原生JS代碼，實(shí)現(xiàn)了簡(jiǎn)單的“瀑布流”布局效果，當(dāng)然肯定不能和以上那些優(yōu)秀插件相提并論，有興趣的朋友，可以去看看，希望能帶給你或多或少的收獲。

效果預(yù)覽： http://www.seejs.com/waterfall/

標(biāo)簽： <無>

[代碼] [JavaScript]代碼

<!DOCTYPE html>    
 <html>    
 <head>    
     <meta charset="utf-8">    
     <title>Waterfall代碼</title>    
 </head>    
 <body>    
 <style type="text/css">    
 .wf-main{    
     position: relative;    
     margin: 0 auto;    
     width: 990px;    
     overflow: hidden;    
 }    
 .wf-main .wf-cld{    
     position: absolute;    
     margin-bottom: 10px;    
     padding:5px 8px;    
     width: 214px;    
     left: -9999px;    
     top: -9999px;    
     border: 1px solid #999;    
     border-radius: 4px;    
     background-color: #ccc;    
     overflow: hidden;    
 }    
 .wf-cld .inner{    
     position: absolute;    
     left: -9999px;    
     top: -9999px;    
     margin-bottom: 5px;    
     width: 73px;    
     overflow: hidden;    
     border: 1px solid #f00;    
     border-radius: 3px;    
 }    
 .wf-cld .title{    
     margin: 0 0 5px;    
     padding: 5px;    
     width: 63px;    
     color: #f00;    
     font-size: 14px;    
 }    
 </style>    
 <div class="wf-main" id="wf-main">    
     <div class="wf-cld"><h2 style="color:#f50">1、瀑布流</h2></div>    
     <div class="wf-cld">2<br>2</div>    
     <div class="wf-cld">3<br>4<br>4</div>    
     <div class="wf-cld">4<br>4<br>4<br>4</div>    
     <div class="wf-cld">5<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">6<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">7<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">8<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">9<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">10<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">18<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">19<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">20<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld" id="wf-inner">    
         <h2 class="inner title">21、內(nèi)部瀑布流</h2>    
         <div class="inner">21-1<br>1</div>    
         <div class="inner">21-2</div>    
         <div class="inner">21-3</div>    
         <div class="inner">21-4</div>    
         <div class="inner">21-5<br></div>    
         <div class="inner">21-6</div>    
         <div class="inner">21-7</div>    
         <div class="inner">21-8</div>    
         <div class="inner">21-9</div>    
     </div>    
     <div class="wf-cld">22<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">23<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">24<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">11<br>2<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">12<br>2<br>2<br>3<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">13<br>4<br>4<br>3<br>3<br>1<br>2<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">14<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">15<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">16<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
     <div class="wf-cld">17<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>    
 </div>    
 <script type="text/javascript">    
 function Waterfall(param){    
     this.id = typeof param.container == 'string' ? document.getElementById(param.container) : param.container;    
     this.colWidth = param.colWidth;    
     this.colCount = param.colCount || 4;    
     this.cls = param.cls && param.cls != '' ? param.cls : 'wf-cld';    
     this.init();    
 }    
 Waterfall.prototype = {    
     getByClass:function(cls,p){    
         var arr = [],reg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)","g");    
         var nodes = p.getElementsByTagName("*"),len = nodes.length;    
         for(var i = 0; i < len; i++){    
             if(reg.test(nodes[i].className)){    
                 arr.push(nodes[i]);    
                 reg.lastIndex = 0;    
             }    
         }    
         return arr;    
     },    
     maxArr:function(arr){    
         var len = arr.length,temp = arr[0];    
         for(var ii= 1; ii < len; ii++){    
             if(temp < arr[ii]){    
                 temp = arr[ii];    
             }    
         }    
         return temp;    
     },    
     getMar:function(node){    
         var dis = 0;    
         if(node.currentStyle){    
             dis = parseInt(node.currentStyle.marginBottom);    
         }else if(document.defaultView){    
             dis = parseInt(document.defaultView.getComputedStyle(node,null).marginBottom);    
         }    
         return dis;    
     },    
     getMinCol:function(arr){    
         var ca = arr,cl = ca.length,temp = ca[0],minc = 0;    
         for(var ci = 0; ci < cl; ci++){    
             if(temp > ca[ci]){    
                 temp = ca[ci];    
                 minc = ci;    
             }    
         }    
         return minc;    
     },    
     init:function(){    
         var _this = this;    
         var col = [],//列高    
             iArr = [];//索引    
         var nodes = _this.getByClass(_this.cls,_this.id),len = nodes.length;    
         for(var i = 0; i < _this.colCount; i++){    
             col[i] = 0;    
         }    
         for(var i = 0; i < len; i++){    
             nodes[i].h = nodes[i].offsetHeight + _this.getMar(nodes[i]);    
             iArr[i] = i;    
         }                
         for(var i = 0; i < len; i++){    
             var ming = _this.getMinCol(col);    
             nodes[i].style.left = ming * _this.colWidth + "px";    
             nodes[i].style.top = col[ming] + "px";    
             col[ming] += nodes[i].h;    
         }    
              
         _this.id.style.height = _this.maxArr(col) + "px";    
     }    
 };    
 new Waterfall({    
     "container":"wf-inner",    
     "colWidth":77,    
     "colCount":3,    
     "cls":"inner"   
 
 });    
 new Waterfall({    
     "container":"wf-main",    
     "colWidth":244,    
     "colCount":4    
 
 });    
 
 </script>    
 
 </body>    
 
 </html>