瀑布流布局的兩種實(shí)現(xiàn)方式：傳統(tǒng)多列浮動(dòng)和絕對(duì)定位布局
發(fā)布時(shí)間：2013-08-26 17:45:27 作者：佚名 
我要評(píng)論
我要評(píng)論瀑布流布局想必大家對(duì)它并不陌生吧，在一些網(wǎng)站上都會(huì)有這種效果的出現(xiàn)，下面為大家介紹下使用兩種方式實(shí)現(xiàn)傳統(tǒng)多列浮動(dòng)和絕對(duì)定位布局，具體的實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
傳統(tǒng)多列浮動(dòng)
各列固定寬度，并且左浮動(dòng)；
一列中的數(shù)據(jù)塊為一組，列中的每個(gè)數(shù)據(jù)塊依次排列即可；
更多數(shù)據(jù)加載時(shí)，需要分別插入到不同的列上；
優(yōu)點(diǎn):
（1）布局簡(jiǎn)單，應(yīng)該說(shuō)沒(méi)啥特別的難點(diǎn)；
（2）不用明確知道數(shù)據(jù)塊高度，當(dāng)數(shù)據(jù)塊中有圖片時(shí)，就不需要指定圖片高度。
缺點(diǎn):
（1）列數(shù)固定，擴(kuò)展不易，當(dāng)瀏覽器窗口大小變化時(shí)，只能固定的x列，如果要添加一列，很難調(diào)整數(shù)據(jù)塊的排列；
（2）滾動(dòng)加載更多數(shù)據(jù)時(shí)，還要指定插入到第幾列中，還是不方便。
代碼范例：
<!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>
絕對(duì)定位
可謂是最優(yōu)的一種方案。
優(yōu)點(diǎn)：
方便添加數(shù)據(jù)內(nèi)容，窗口變化，列數(shù)/數(shù)據(jù)塊都會(huì)自動(dòng)調(diào)整；
缺點(diǎn):
（1）需要實(shí)現(xiàn)知道數(shù)據(jù)塊高度，如果其中包含圖片，需要知道圖片高度；
（2）JS 動(dòng)態(tài)計(jì)算數(shù)據(jù)塊位置，當(dāng)窗口縮放頻繁，可能會(huì)狂耗性能。
代碼范例：
<!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>
各列固定寬度，并且左浮動(dòng)；
一列中的數(shù)據(jù)塊為一組，列中的每個(gè)數(shù)據(jù)塊依次排列即可；
更多數(shù)據(jù)加載時(shí)，需要分別插入到不同的列上；
優(yōu)點(diǎn):
（1）布局簡(jiǎn)單，應(yīng)該說(shuō)沒(méi)啥特別的難點(diǎn)；
（2）不用明確知道數(shù)據(jù)塊高度，當(dāng)數(shù)據(jù)塊中有圖片時(shí)，就不需要指定圖片高度。
缺點(diǎn):
（1）列數(shù)固定，擴(kuò)展不易，當(dāng)瀏覽器窗口大小變化時(shí)，只能固定的x列，如果要添加一列，很難調(diào)整數(shù)據(jù)塊的排列；
（2）滾動(dòng)加載更多數(shù)據(jù)時(shí)，還要指定插入到第幾列中，還是不方便。
代碼范例：
復(fù)制代碼
代碼如下:<!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>
絕對(duì)定位
可謂是最優(yōu)的一種方案。
優(yōu)點(diǎn)：
方便添加數(shù)據(jù)內(nèi)容，窗口變化，列數(shù)/數(shù)據(jù)塊都會(huì)自動(dòng)調(diào)整；
缺點(diǎn):
（1）需要實(shí)現(xiàn)知道數(shù)據(jù)塊高度，如果其中包含圖片，需要知道圖片高度；
（2）JS 動(dòng)態(tài)計(jì)算數(shù)據(jù)塊位置，當(dāng)窗口縮放頻繁，可能會(huì)狂耗性能。
代碼范例：
復(fù)制代碼
代碼如下:<!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>
相關(guān)文章
這篇文章主要介紹了3種方式實(shí)現(xiàn)瀑布流布局小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2019-09-05
詳解純css實(shí)現(xiàn)瀑布流（multi-column多列及flex布局）
這篇文章主要介紹了詳解純css實(shí)現(xiàn)瀑布流（multi-column多列及flex布局）的相關(guān)資料，用multi-column多列布局及flex布局實(shí)現(xiàn)瀑布流，感興趣的小伙伴們可以參考一下2018-09-04css3 column實(shí)現(xiàn)卡片瀑布流布局的示例代碼
這篇文章主要介紹了css3 column實(shí)現(xiàn)卡片瀑布流布局的示例代碼的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-22- 這篇文章主要介紹了用CSS3實(shí)現(xiàn)瀑布流布局的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-10
CSS3實(shí)現(xiàn)瀑布流布局與無(wú)限加載圖片相冊(cè)的實(shí)例代碼
本篇文章主要介紹了CSS3實(shí)現(xiàn)瀑布流布局與無(wú)限加載圖片相冊(cè)的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-12-22
waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)
這篇文章主要介紹了waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2021-01-19
