<!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>
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄