传统多列浮动
各列固定宽度,并且左浮动;
一列中的数据块为一组,列中的每个数据块依次排列即可;
更多数据加载时,需要分别插入到不同的列上;
优点:
(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="/UploadFiles/2021-03-30/1.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/2.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/3.jpg"></li>
</ul>
<ul>
<li>
<img src="/UploadFiles/2021-03-30/4.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/5.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/6.jpg"></li>
</ul>
<ul>
<li>
<img src="/UploadFiles/2021-03-30/7.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/8.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/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="/UploadFiles/2021-03-30/1.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/2.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/3.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/4.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/5.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/6.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/7.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/8.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/9.jpg"></li>
</ul>
</div>
</body>
</html>
各列固定宽度,并且左浮动;
一列中的数据块为一组,列中的每个数据块依次排列即可;
更多数据加载时,需要分别插入到不同的列上;
优点:
(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="/UploadFiles/2021-03-30/1.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/2.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/3.jpg"></li>
</ul>
<ul>
<li>
<img src="/UploadFiles/2021-03-30/4.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/5.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/6.jpg"></li>
</ul>
<ul>
<li>
<img src="/UploadFiles/2021-03-30/7.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/8.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/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="/UploadFiles/2021-03-30/1.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/2.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/3.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/4.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/5.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/6.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/7.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/8.jpg"></li>
<li>
<img src="/UploadFiles/2021-03-30/9.jpg"></li>
</ul>
</div>
</body>
</html>
标签:
瀑布流布局,多列浮动,绝对定位
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
千金楼资源网 Copyright www.htabc.com
暂无“瀑布流布局的两种实现方式:传统多列浮动和绝对定位布局”评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]