比较容易理解的---原生js瀑布流最近一直在恶补基础JS H5 CSS3的基础知识
关于这个瀑布流:
本来打算看着教程来做的。 不过 感觉理解起来有点复杂。
SO， 自己参考教程默写了一个。。
目前我所接触过的瀑布流布局分为2大类
主要区分在于 float布局 或者position布局
点击这里下载Demo
贴下源码：（可能有些BUG，没有具体测试）
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> 7 *{ margin:0; padding:0;} 8 body{ background:#ddd; } 9 ul{ width:1000px; margin:0 auto; position:relative;}10 ul li{ width:300px; padding:5px;text-align:center; background:#FFF; border:1px solid #CCC; position:absolute; list-style-type:none; top:0;}11 ul li img{ width:300px; height:auto;}12 13 </style>14 15 <script>16 //@powerd by websir17 window.onload = function(){18 var oAdd = document.getElementById("add"); 19 var oUl = document.getElementById("ul");20 var aLi = oUl.getElementsByTagName("li")21 var aPos = [{top:0,left:"0px"},{top:0,left:"315px"},{top:0,left:"630px"}]22 var s = 0;23 for(var i =0;i<aLi.length;i++)24 {25 sortLi(aLi[i])26 27 }28 29 add.onclick = function(){30 var newLi = document.createElement("li");31 var img = new Image();32 var span = document.createElement("span");33 span.innerHTML = Math.ceil(Math.random()*8)*11111;34 img.src = Math.ceil(Math.random()*8)+".jpg";35 newLi.appendChild(img);36 newLi.appendChild(span)37 img.onload = function(){38 oUl.appendChild(newLi);39 sortLi(newLi)40 }41 42 }43 44 function sortLi(obj){45 aPos.sort(function(a,b){return a.top-b.top});46 obj.style.left = aPos[0].left;47 obj.style.top = aPos[0].top+"px";48 aPos[0].top += obj.offsetHeight+5;49 50 }51 52 53 }54 55 56 </script>57 58 59 </head>60 61 <body>62 63 <input id="add" value="添加" type="button" style="position:fixed; height:30px; width:100%; top:0; z-index:9;" />64 65 <ul id="ul">66 <li><img src="1.jpg" />22222</li>67 <li><img src="2.jpg" />22222</li>68 <li><img src="3.jpg" />22222</li>69 <li><img src="4.jpg" />22222</li>70 <li><img src="5.jpg" />22222</li>71 <li><img src="6.jpg" />22222</li>72 <li><img src="7.jpg" />22222</li>73 <li><img src="8.jpg" />22222</li>74 75 76 </ul>77 </body>78 </html>