时间:2016-01-22 07:36 来源: 我爱IT技术网 作者:佚名
本文所分享的知识点是【瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局
<!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="http://www.jb51.net/css/img/1.jpg" />
</li>
<li>
<img src="http://www.jb51.net/css/img/2.jpg" />
</li>
<li>
<img src="http://www.jb51.net/css/img/3.jpg" />
</li>
<li>
<img src="http://www.jb51.net/css/img/4.jpg" />
</li>
<li>
<img src="http://www.jb51.net/css/img/5.jpg" />
</li>
<li>
<img src="http://www.jb51.net/css/img/6.jpg" />
</li>
<li>
<img src="http://www.jb51.net/css/img/7.jpg" />
</li>
<li>
<img src="http://www.jb51.net/css/img/8.jpg" />
</li>
<li>
<img src="http://www.jb51.net/css/img/9.jpg" />
</li>
</ul>
</div>
</body>
</html>
关于瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局的相关讨论如下：
相关问题：如何在响应式布局中实现绝对定位
答：不随滚动的高度变化得设置position:fixed; 完整的代码： header a.btn_join{position:fixed; _position:absolute; top:*px; _top:expression(eval(document.documentElement.scrollTop)}兼容ie浏览器，具体数值自己设定下 >>详细
相关问题：html 布局时候div用了绝对定位或者漂浮以后，下面...
答：不要用绝对定位，用了绝对定位需要给margin属性调试到自己想要的位置 >>详细
相关问题：在做网站的时候应该怎样布局，我全程用div绝对定位...
答：去看《网站重构》, web人员必看，讲的是用web标准来进行网站开发， 它能够很大程度上降低你的代码成本而且提高搜索量及网站开发效率。 同时讲了网站布局。 我这一时半会儿讲不清楚， 自己理解才是最主要的 书通俗易懂，看得快的话2。3天就看完了。 >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-