你的位置:首页 > 软件开发 > Java > 比较容易理解的

比较容易理解的

发布时间:2015-04-02 20:00:52
最近一直在恶补基础JS H5 CSS3的基础知识关于这个瀑布流: 本来打算看着教程来做的。 不过 感觉理解起来有点复杂。 SO, 自己参考教程默写了一个。。 目前我所接触过的瀑布流布局分为2大类 主要区分在于 float布局 或者position布局 点击这里 ...

最近一直在恶补基础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 ="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='/images/loading.gif' data-original="1.jpg" />22222</li>67 <li><img src='/images/loading.gif' data-original="2.jpg" />22222</li>68 <li><img src='/images/loading.gif' data-original="3.jpg" />22222</li>69 <li><img src='/images/loading.gif' data-original="4.jpg" />22222</li>70 <li><img src='/images/loading.gif' data-original="5.jpg" />22222</li>71 <li><img src='/images/loading.gif' data-original="6.jpg" />22222</li>72 <li><img src='/images/loading.gif' data-original="7.jpg" />22222</li>73 <li><img src='/images/loading.gif' data-original="8.jpg" />22222</li>74 75 76 </ul>77 </body>78 </html>

原标题:比较容易理解的

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录