标签：3px list li width 瀑布 oList var
<!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>
标签：3px,list,li,width,瀑布,oList,var 来源： https://www.cnblogs.com/asablog/p/10731724.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。