这款是在网上学习制作的,原理那啥的超级简单。。。话不多说,直接上代码
<!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>