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>