固定列瀑布流
2016-08-06 本文已影响0人
一只小裸熊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrap{width: 600px;
margin:0 auto;
padding:20px 10px;
border:1px solid #999;
overflow: hidden;}
.wrap ul{
float:left;
width: 200px;
list-style: none;
padding:0 10px;
/*怪异和模型*/
box-sizing:border-box;
}
.wrap ul li{
background-color: #ccc;
margin-bottom: 20px;
font-size: 10px;
}
</style>
</head>
<body>
<div class="wrap"id="wrap">
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
<script>
//总函数
function flowFn(){
//获取元素
var wrap=document.getElementById('wrap');
var list=document.getElementsByTagName('ul');
//设置一个随机函数
function randFn(max,min){
var rand=parseInt(Math.random()*(max-min)+min);
return rand;
}
//创建li元素 函数
function createLi(){
//创建10li
for(var i=0;i<10;i++){
var li=document.createElement('li');
//为li文本内容
// li.innerHTML=i;
// 随机获得一个高度
var height=randFn(100,300);
//将随机的高赋值给li
li.style.height=height+"px";
//创建一个数组
var heightArr=[];
//获取最小高度下标
var minIndex=0;
//循环获取元素高度
for(var j=0;j<list.length;j++){
//获取list数组中每个元素的高度,并放入空的数组中
heightArr.push(list[j].offsetHeight)
// 假定数组0下标的值最小
var minHeight=heightArr[0];
//
if(minHeight>heightArr[j]){
//将最小值给minHeight
minHeight=heightArr[j];
//获取到最小的高度下标
minIndex=j;
}
}
//将li优先添加到高度最小的ul中,目的就是使高度均衡
list[minIndex].appendChild(li);
}
}
createLi();
}
flowFn();
</script>
</html>
Paste_Image.png
