您的位置：首页 > 其它

一款超级简单的瀑布流的制作

2016-12-12 00:00 197 查看

这款是在网上学习制作的，原理那啥的超级简单。。。话不多说，直接上代码

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 瀑布流

相关文章推荐

新的分享

章节导航