瀑布流 | 易学教程

<!DOCTYPE html>

<head>

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

</body>

</html>

瀑布流的思路

将N列的初始高度存放在一个数组中，对比数组中最新的一个高度，然后将下一条数据插入最小的那一列中

var str = "";

for(var i=0;i<70;i++){

　　str+=`<li>

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

来源：https://www.cnblogs.com/asablog/p/10731724.html

标签

瀑布流

var