1 <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>瀑布流式布局</title> 6 <style type="text/css"> 7 #wrap{ margin:0; padding:0; width:800px; height:3000px; margin:0 auto; background:#C60; position:relative;} 8 .item{ width:240px; height:auto; border-radius:5px; background:#FFC; position:absolute;} 9 .item1{ height:300px;} 10 .item2{ height:250px;} 11 .item3{ height:350px;} 12 </style> 13 </head> 14 <body> 15 <div id="wrap"> 16 <div class="item item1">1</div> 17 <div class="item item2">2</div> 18 <div class="item item3">3</div> 19 <div class="item item2">4</div> 20 <div class="item item3">5</div> 21 <div class="item item1">6</div> 22 <div class="item item3">7</div> 23 <div class="item item1">8</div> 24 <div class="item item2">9</div> 25 <div class="item item3">10</div> 26 <div class="item item2">11</div> 27 <div class="item item3">12</div> 28 <div class="item item1">13</div> 29 <div class="item item3">14</div> 30 <div class="item item1">15</div> 31 <div class="item item2">16</div> 32 </div> 33 <script type="text/javascript"> 34 document.getElementByClassName = function(className,tag) 35 { 36 var tag = tag?tag:"*"; 37 var allTags = document.getElementsByTagName(tag); 38 var tagNums = allTags.length; 39 var element = []; 40 var i=0; 41 for(n in allTags){ 42 current = allTags.item(n); 43 if(current!=null){//如果当前元素的class不等于null 44 if(current.className==className)//找到类名为className的dom元素 45 { 46 element[i++]=current; 47 } 48 } 49 } 50 return element; 51 } 52 //该函数获取obj的CSS属性。 53 function GetCurrentStyle (obj, prop) { 54 if (obj.currentStyle) { 55 return obj.currentStyle[prop]; 56 } 57 else if (window.getComputedStyle) { 58 propprop = prop.replace (/([A-Z])/g, "-$1"); 59 propprop = prop.toLowerCase (); 60 return document.defaultView.getComputedStyle (obj,null)[prop]; 61 } 62 return null; 63 } 64 65 var wrap= document.getElementById("wrap"); 66 var items= document.getElementsByClassName("item"); 67 var i,l,h1,h2,h3; 68 h1=0; 69 h2=0; 70 h3=0; 71 //i为最大列数，根据容器wrap的宽度和单项的宽度相比得出； 72 i=Math.floor(parseInt(GetCurrentStyle(wrap,"width"))/parseInt(GetCurrentStyle(items[0],"width"))); 73 //l表示间距。容器宽度-单项宽度*项数=空白宽度，空白宽度/列数-1=每个空白宽度 74 l=(parseInt(GetCurrentStyle(wrap,"width"))-parseInt(GetCurrentStyle(items[0],"width"))*i)/(i-1); 75 for(var j=0;j<items.length;j++){ 76 //var h1,h2,h3; 77 if(j<i){ 78 items[j].style.top="0px"; 79 items[j].style.left= j%i *(l+parseInt(GetCurrentStyle(items[0],"width")))+"px"; 80 if(j%i ==0 ){ 81 h1+=parseInt(GetCurrentStyle(items[j],"height"))+10;//J=0，H1=300 82 } 83 else if(j%i==1){ 84 h2+=parseInt(GetCurrentStyle(items[j],"height"))+10;//J=1，H2=250 85 } 86 else if(j%i==2){ 87 h3+=parseInt(GetCurrentStyle(items[j],"height"))+10;//J=2，H3=350 88 } 89 } 90 else { 91 var minheight=Math.min(Math.min(h1,h2),h3); 92 if( minheight == h1){ 93 items[j].style.top = h1+"px"; 94 items[j].style.left= "0px"; 95 h1+=parseInt(GetCurrentStyle(items[j],"height"))+10; 96 } 97 else if(minheight == h2){ 98 items[j].style.top = h2+"px"; 99 items[j].style.left=parseInt(GetCurrentStyle(items[0],"width"))+l+"px"; 100 h2+=parseInt(GetCurrentStyle(items[j],"height"))+10; 101 } 102 else if(minheight == h3){ 103 items[j].style.top = h3+"px"; 104 items[j].style.left= (parseInt(GetCurrentStyle(items[0],"width"))+l)*2+"px"; 105 h3+=parseInt(GetCurrentStyle(items[j],"height"))+10; 106 } 107 } 108 } 109 </script> 110 </body> 111 </html>