昨天练习写了这个小demo，个人觉得通过设置定位元素left和top的值，来实现换行的功能，这种方法很巧妙~
另外，如下代码中的随机颜色的获取，还请各位前辈多多指教：需要改进的地方；或者有没有更好的方法。
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????????<style type="text/css"> 7 ????????????body{text-align: center;} 8 ????????????li{height:50px;width:50px;background:red;position:absolute;list-style:none;text-align: center;color:white;line-height:50px;} 9 ????????</style>10 ????????<script type="text/javascript">11 ????????????window.onload=function(){12 ????????????????var text1=document.getElementById("texta");13 ????????????????var btn1=document.getElementById("btn");14 ????????????????var ul1=document.getElementById("ul"); ???????????15 ????????????????btn1.onclick=function(){16 ????????????????????for(var i=0;i<parseInt(text1.value);i++){17 ????????????????????????18 ????????????????????????var li1=document.createElement("li");19 ????????????????????????li1.style.left=li1.offsetLeft+i%20*64+"px";20 ????????????????????????li1.style.top=li1.offsetTop+parseInt(i/20)*64+64+"px"; ?// 实现换行21 ????????????????????????li1.innerHTML=i+1;22 ????????????????????????li1.style.background=random_load();23 ????????????????????????ul1.appendChild(li1);24 ????????????????????????25 ????????????????????}26 ????????????????}27 ????????????}28 ????????????function random_load(){29 ????????????????var R=hao(0,255).toString(16); ?30 ????????????????var G=hao(0,255).toString(16);31 ????????????????var B=hao(0,255).toString(16);32 ????????????????return "#"+aaa(R,G,B);33 ????????????}34 ????????????function hao(min,max){35 ??????????????????return parseInt(Math.random()*(max-min+1)+min)36 ????????????}37 ????????????function aaa(r,g,b){ ?????????????????38 ??????????????????r=r.length==1?"0"+r:r;39 ??????????????????g=g.length==1?"0"+g:g;40 ??????????????????b=b.length==1?"0"+b:b; ???//随机会获取到5位的十六进制数，不能作为颜色值，所以用这个方法解决，还请前辈多多指点 ?^-^！41 ??????????????????return r+g+b;42 ????????????}43 ????????</script>44 ????</head>45 ????<body>46 ????????<input type="text" name="texta" id="texta" value="" />47 ????????<input type="button" name="btn" id="btn" value="生成DIV" />48 ????????<ul id="ul">49 ????????</ul>50 ????</body>51 </html>原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~
原文地址：https://www.cnblogs.com/mycognos/p/9153689.html