瀑布流 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>Waterfall代码</title>
  6 </head>
  7 <body>
  8 <style type="text/css">
  9 .wf-main{
 10     position: relative;
 11     margin: 0 auto;
 12     width: 990px;
 13     overflow: hidden;
 14 }
 15 .wf-main .wf-cld{
 16     position: absolute;
 17     margin-bottom: 10px;
 18     padding:5px 8px;
 19     width: 214px;
 20     left: -9999px;
 21     top: -9999px;
 22     line-height:18px;
 23     border: 1px solid #999;
 24     border-radius: 4px;
 25     background-color: #ccc;
 26     overflow: hidden;
 27 }
 28 .wf-cld .inner{
 29     position: absolute;
 30     left: -9999px;
 31     top: -9999px;
 32     margin-bottom: 5px;
 33     width: 73px;
 34     overflow: hidden;
 35     border: 1px solid #f00;
 36     border-radius: 3px;
 37 }
 38 .wf-cld .title{
 39     margin: 0 0 5px;
 40     padding: 5px;
 41     width: 63px;
 42     color: #f00;
 43     font-size: 14px;
 44 }
 45 </style>
 46 <div class="wf-main" id="wf-main">
 47     <div class="wf-cld"><h2 style="color:#f50">1、瀑布流</h2></div>
 48     <div class="wf-cld">2<br>2</div>
 49     <div class="wf-cld">3<br>4<br>4</div>
 50     <div class="wf-cld">4<br>4<br>4<br>4</div>
 51     <div class="wf-cld">5<br>4<br>4<br>4<br>4</div>
 52     <div class="wf-cld">6<br>4<br>4<br>4<br>4<br>4</div>
 53     <div class="wf-cld">7<br>4<br>4<br>4<br>4<br>4<br>4</div>
 54     <div class="wf-cld">8<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
 55     <div class="wf-cld">9<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
 56     <div class="wf-cld">10<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
 57     <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>
 58     <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>
 59     <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>
 60     <div class="wf-cld" id="wf-inner">
 61         <h2 class="inner title">21、内部瀑布流</h2>
 62         <div class="inner">21-1<br>1</div>
 63         <div class="inner">21-2</div>
 64         <div class="inner">21-3</div>
 65         <div class="inner">21-4</div>
 66         <div class="inner">21-5<br></div>
 67         <div class="inner">21-6</div>
 68         <div class="inner">21-7</div>
 69         <div class="inner">21-8</div>
 70         <div class="inner">21-9</div>
 71     </div>
 72     <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>
 73     <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>
 74     <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>
 75     <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>
 76     <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>
 77     <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>
 78     <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>
 79     <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>
 80     <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>
 81     <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>
 82 </div>
 83 <script type="text/javascript">
 84 function Waterfall(param){
 85     this.id = typeof param.container == 'string' ? document.getElementById(param.container) : param.container;
 86     this.colWidth = param.colWidth;
 87     this.colCount = param.colCount || 4;
 88     this.cls = param.cls && param.cls != '' ? param.cls : 'wf-cld';
 89     this.init();
 90 }
 91 Waterfall.prototype = {
 92     getByClass:function(cls,p){
 93         var arr = [],reg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)","g");
 94         var nodes = p.getElementsByTagName("*"),len = nodes.length;
 95         for(var i = 0; i < len; i++){
 96             if(reg.test(nodes[i].className)){
 97                 arr.push(nodes[i]);
 98                 reg.lastIndex = 0;
 99             }
100         }
101         return arr;
102     },
103     maxArr:function(arr){
104         var len = arr.length,temp = arr[0];
105         for(var ii= 1; ii < len; ii++){
106             if(temp < arr[ii]){
107                 temp = arr[ii];
108             }
109         }
110         return temp;
111     },
112     getMar:function(node){
113         var dis = 0;
114         if(node.currentStyle){
115             dis = parseInt(node.currentStyle.marginBottom);
116         }else if(document.defaultView){
117             dis = parseInt(document.defaultView.getComputedStyle(node,null).marginBottom);
118         }
119         return dis;
120     },
121     getMinCol:function(arr){
122         var ca = arr,cl = ca.length,temp = ca[0],minc = 0;
123         for(var ci = 0; ci < cl; ci++){
124             if(temp > ca[ci]){
125                 temp = ca[ci];
126                 minc = ci;
127             }
128         }
129         return minc;
130     },
131     init:function(){
132         var _this = this;
133         var col = [],//列高
134             iArr = [];//索引
135         var nodes = _this.getByClass(_this.cls,_this.id),len = nodes.length;
136         for(var i = 0; i < _this.colCount; i++){
137             col[i] = 0;
138         }
139         for(var i = 0; i < len; i++){
140             nodes[i].h = nodes[i].offsetHeight + _this.getMar(nodes[i]);
141             iArr[i] = i;
142         }
143         
144         for(var i = 0; i < len; i++){
145             var ming = _this.getMinCol(col);
146             nodes[i].style.left = ming * _this.colWidth + "px";
147             nodes[i].style.top = col[ming] + "px";
148             col[ming] += nodes[i].h;
149         }
150         
151         _this.id.style.height = _this.maxArr(col) + "px";
152     }
153 };
154 new Waterfall({
155     "container":"wf-main",
156     "colWidth":244,
157     "colCount":4
158 });
159 </script>
160 </body>
161 </html>

 

posted @ 2013-12-09 16:37  z8251600  阅读(99)  评论(0)    收藏  举报