您的位置：首页 > 其它

瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局

2013-08-26 17:45 706 查看
传统多列浮动

各列固定宽度，并且左浮动；
一列中的数据块为一组，列中的每个数据块依次排列即可；
更多数据加载时，需要分别插入到不同的列上；

优点:
（1）布局简单，应该说没啥特别的难点；
（2）不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。
缺点:
（1）列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；
（2）滚动加载更多数据时，还要指定插入到第几列中，还是不方便。

代码范例： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>瀑布流布局</title> 
<style> 
*{ margin:0px; padding:0px;} 
li{ list-style:none} 
#div1{ width:760px; height:auto; margin:20px auto;} 
ul{ width:240px; margin:5px; float:left;} 
</style> 
</head> 
<body> 
<div id="div1"> 
<ul> 
<li> 
<img src="img/1.jpg" /> 
</li> 
<li> 
<img src="img/2.jpg" /> 
</li> 
<li> 
<img src="img/3.jpg" /> 
</li> 
</ul> 
<ul> 
<li> 
<img src="img/4.jpg" /> 
</li> 
<li> 
<img src="img/5.jpg" /> 
</li> 
<li> 
<img src="img/6.jpg" /> 
</li> 
</ul> 
<ul> 
<li> 
<img src="img/7.jpg" /> 
</li> 
<li> 
<img src="img/8.jpg" /> 
</li> 
<li> 
<img src="img/9.jpg" /> 
</li> 
</ul> 
</div> 
</body> 
</html>

绝对定位
可谓是最优的一种方案。

优点：
方便添加数据内容，窗口变化，列数/数据块都会自动调整；

缺点:
（1）需要实现知道数据块高度，如果其中包含图片，需要知道图片高度；
（2）JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。

代码范例： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>定位的瀑布流</title> 
<style> 
*{ margin:0px; padding:0px;} 
li{ list-style:none} 
#div1{ width:760px; height:auto; margin:20px auto; position:relative;} 
li{ position:absolute;} 
</style> 
<script language="javascript"> 
window.onload=function(){ 
var ali = document.getElementsByTagName('li'); 
var aHeight={L:[],C:[],R:[]}; 
for(var i = 0;i<ali.length;i++){ 
var iNow=i%3; 
switch(iNow){ 
case 0: 
ali[i].style.left='5px'; 
aHeight.L.push(ali[i].offsetHeight); 
var step=Math.floor(i/3); 
if(!step){ 
ali[i].style.top=0; 
}else{ 
var sum=0; 
for(var j=0;j<step;j++){ 
sum+=aHeight.L[j]+5; 
} 
ali[i].style.top=sum+'px'; 
} 
break; 
case 1: 
ali[i].style.left='250px'; 
aHeight.C.push(ali[i].offsetHeight); 
var step=Math.floor(i/3); 
if(!step){ 
ali[i].style.top=0; 
}else{ 
var sum=0; 
for(var j=0;j<step;j++){ 
sum+=aHeight.C[j]+5; 
} 
ali[i].style.top=sum+'px'; 
} 
break; 
case 2: 
ali[i].style.left='495px'; 
aHeight.R.push(ali[i].offsetHeight); 
var step=Math.floor(i/3); 
if(!step){ 
ali[i].style.top=0; 
}else{ 
var sum=0; 
for(var j=0;j<step;j++){ 
sum+=aHeight.R[j]+5; 
} 
ali[i].style.top=sum+'px'; 
} 
break; 
} 
} 
} 
</script> 
</head> 
<body> 
<div id="div1"> 
<ul> 
<li> 
<img src="img/1.jpg" /> 
</li> 
<li> 
<img src="img/2.jpg" /> 
</li> 
<li> 
<img src="img/3.jpg" /> 
</li> 
<li> 
<img src="img/4.jpg" /> 
</li> 
<li> 
<img src="img/5.jpg" /> 
</li> 
<li> 
<img src="img/6.jpg" /> 
</li> 
<li> 
<img src="img/7.jpg" /> 
</li> 
<li> 
<img src="img/8.jpg" /> 
</li> 
<li> 
<img src="img/9.jpg" /> 
</li> 
</ul> 
</div> 
</body> 
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航