瀑布流
Posted asablog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了瀑布流相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0}
ul,li{list-style: none}
#list{
margin:30px auto;
width:830px;
position: relative;
}
#list>li{
width:200px;
border:1px solid #ccc;
box-shadow: 3px 3px 3px #ccc;
}
#list>li>img{
width:100%;
}
</style>
</head>
<body>
<ul id="list">
</ul>
</body>
</html>
<script>
/*
瀑布流的思路
将N列的初始高度存放在一个数组中，对比数组中最新的一个高度，然后将下一条数据插入最小的那一列中
*/
var str = "";
for(var i=0;i<70;i++){
str+=`<li>
<img src="./img/${i+1}.jpg"/>
<p>
感谢今天这个事件，让我终于能下定决心，和安徽汽车网说再见了。
这个承载了我青春、汗水与激情的汽车网络媒体，
将正式转型为专业的汽车MCN机构。除了“汽车辣评TV”外，我们还将开辟“比特新能源”等多个视频栏目。
欢迎汽车品牌、公关公司来电合作。
点击查看汽车辣评小姐姐
</p>
</li>`
}
var oList = document.getElementById("list");
oList.innerHTML = str;
window.onload = function(){
var aLi = oList.getElementsByTagName("li");
var iH = [];
for(var i=0;i<4;i++){
aLi[i].style.position = "absolute";
aLi[i].style.left = i * (202 + 10) +‘px‘;
aLi[i].style.top = 0;
iH[i] = aLi[i].offsetHeight;
}
for(var i=4;i<aLi.length;i++){
var index = getIndex(iH);
aLi[i].style.position = "absolute";
aLi[i].style.left = index * (202 + 10) +‘px‘;
aLi[i].style.top = iH[index] + 10+ ‘px‘;
iH[index] = iH[index] + aLi[i].offsetHeight + 10 ;
}
function getIndex(arr){
var min = arr[0];
var index = 0;
for(var i=0;i<arr.length;i++){
if(min>arr[i]){
min = arr[i];
index = i;
}
}
return index;
}
}
</script>
以上是关于瀑布流的主要内容，如果未能解决你的问题，请参考以下文章