比较容易理解的---原生js瀑布流
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了比较容易理解的---原生js瀑布流相关的知识，希望对你有一定的参考价值。
最近一直在恶补基础JS H5 CSS3的基础知识
关于这个瀑布流:
本来打算看着教程来做的。 不过 感觉理解起来有点复杂。
SO， 自己参考教程默写了一个。。
目前我所接触过的瀑布流布局分为2大类
主要区分在于 float布局 或者position布局
贴下源码：（可能有些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 websir 17 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>
以上是关于比较容易理解的---原生js瀑布流的主要内容，如果未能解决你的问题，请参考以下文章
原生JavaScript实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]