js实现瀑布流
<script type="text/javascript"> window.onload = function(){ pubuliu("ulwrap",4,299); }; //实现ul下的li瀑布流 //cols 表示一行几列,liWidth 表示一列的宽度 function pubuliu(ulId,cols,liWidth){ var wrap = document.getElementById(ulId); var lis = wrap.getElementsByTagName("li"); var li_h = []; for(var i=0; i<lis.length; i++){ if(i < cols){ //设置最小高度,存入li_h数组 li_h[i] = lis[i].scrollHeight+10; //定位元素 lis[i].style.left = i * liWidth + "px"; lis[i].style.top = "0px"; }else{ //获取数组最小值 var min_liH = Math.min.apply( Math, li_h); var key = getKeyByValue(li_h,min_liH); //重定义最小高度 li_h[key] = min_liH + lis[i].scrollHeight+10; //定位元素 lis[i].style.left = key * liWidth + "px"; lis[i].style.top = min_liH + "px"; } } } //根据数组中的值获取索引 function getKeyByValue(arr,value){ for(var i=0; i<arr.length; i++){ if(arr[i] == value){ return i; } } } </script>
首先设置几行,固定宽度,高度自适应,通过js实现li标签的绝对定位。
js方法理解:先判断一共多少个li,当地i个li小于4列的时候,把他们向下浮动的高度保存到li_h[]的数组里【1,2,3,4用于判断绝对位置的left】,小于4的时候,设置绝对高度,当大于4的时候,再放第五个li标签的时候,先判断li_h[]中的数组中最小的一个数组高度,然后用getKeyByValue()方法,返回最小高度的位置,在重新定义当前数组的高度的时候,加上10,是li的padding的和,每次改变的时候,都需要加padding的值。
<style> ul.wrap{ width:1190px; margin:0 auto; position:absolute; /* 相对定位 */ } ul.wrap li{ float:left; position:absolute; /* 绝对定位 */ } /*ul.wrap li img{*/ /* 计算好长度 */ /*width:265px;*/ /*border:2px solid #bdbdbd;*/ /*padding:10px;*/ /*margin:4px;*/ /*}*/ </style>