<!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>
固定列瀑布流
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 几点说明 1.本文所说的瀑布流指的是等宽不等高的瀑布流 2.本文使用的方法可以使用图片延时加载而不会影响瀑布流效果...
- 示例——瀑布流 效果图 多列 columns:<' column-width '> || <' column-co...