一款超级简单的瀑布流的制作
生活随笔
收集整理的這篇文章主要介紹了
一款超级简单的瀑布流的制作
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
? 這款是在網(wǎng)上學(xué)習(xí)制作的，原理那啥的超級簡單。。。話不多說，直接上代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>瀑布流</title><style>*{margin: 0;padding: 0;}#content{width: 1000px;border: 1px solid black;margin: 0 auto;overflow: hidden;}ul{padding: 4px;float: left;list-style-type: none;display: block;width: 191px;}ul li{background: yellow;font-size: 100px;color: #ffffff;text-align: center;margin-bottom: 5px;}</style> </head> <body> <div id="content"><ul></ul><ul></ul><ul></ul><ul></ul><ul></ul> </div></body> <script>function randomNum(x,y){return Math.floor(Math.random()*(y-x+1)+x);}function randomColor(){var red = randomNum(0,255);var green = randomNum(0,255);var blue = randomNum(0,255);return 'rgb(' + red + ',' + green + ',' + blue +')';}var content = document.getElementById('content');var uls = document.querySelectorAll('ul');content.style.flex = uls.length;for(var i=0;i<100;i++){var li = document.createElement('li');li.style.backgroundColor = randomColor();li.style.height = randomNum(150,500) + 'px';li.innerHTML = i+1 + ' ';var index = 0;for(var j=0;j<uls.length;j++){if(uls[j].offsetHeight < uls[index].offsetHeight){index = j;}}uls[index].appendChild(li);} </script> </html>轉(zhuǎn)載于:https://my.oschina.net/tianyuqin/blog/804334
總結(jié)
以上是生活随笔為你收集整理的一款超级简单的瀑布流的制作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ciancd开源
- 下一篇： 部署 DevStack - 每天5分钟玩