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