一款超级简单的瀑布流的制作
生活随笔
收集整理的這篇文章主要介紹了
一款超级简单的瀑布流的制作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
? 這款是在網上學習制作的，原理那啥的超級簡單。。。話不多說，直接上代碼
<!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>轉載于:https://my.oschina.net/tianyuqin/blog/804334
總結
以上是生活随笔為你收集整理的一款超级简单的瀑布流的制作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ciancd开源
- 下一篇： 部署 DevStack - 每天5分钟玩