程序员之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

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

  发布时间：2013-08-26 17:45:27   作者：佚名   我要评论
瀑布流布局想必大家对它并不陌生吧，在一些网站上都会有这种效果的出现，下面为大家介绍下使用两种方式实现传统多列浮动和绝对定位布局，具体的实现代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

传统多列浮动

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

优点:
（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=gbk" />
<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="http://9i0i.com/pic.php?p=img/1.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=img/2.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=img/3.jpg" />
</li>
</ul>
<ul>
<li>
<img src="http://9i0i.com/pic.php?p=img/4.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=img/5.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=img/6.jpg" />
</li>
</ul>
<ul>
<li>
<img src="http://9i0i.com/pic.php?p=img/7.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=img/8.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=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=gbk" />
<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://9i0i.com/pic.php?p=img/1.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=img/2.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=img/3.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=img/4.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=img/5.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=img/6.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=img/7.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=img/8.jpg" />
</li>
<li>
<img src="http://9i0i.com/pic.php?p=img/9.jpg" />
</li>
</ul>
</div>
</body>
</html>

相关文章

  • 3种方式实现瀑布流布局小结

    这篇文章主要介绍了3种方式实现瀑布流布局小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习
    2019-09-05

  • 详解纯css实现瀑布流（multi-column多列及flex布局）

    这篇文章主要介绍了详解纯css实现瀑布流（multi-column多列及flex布局）的相关资料，用multi-column多列布局及flex布局实现瀑布流，感兴趣的小伙伴们可以参考一下
    2018-09-04

  • css3 column实现卡片瀑布流布局的示例代码

    这篇文章主要介绍了css3 column实现卡片瀑布流布局的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-22

  • 用CSS3实现瀑布流布局的示例代码

    这篇文章主要介绍了用CSS3实现瀑布流布局的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-10

  • CSS3实现瀑布流布局与无限加载图片相册的实例代码

    本篇文章主要介绍了CSS3实现瀑布流布局与无限加载图片相册的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2016-12-22

  • waterfall瀑布流布局+动态渲染的实现

    这篇文章主要介绍了waterfall瀑布流布局+动态渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起
    2021-01-19

最新评论

关注微信公众号

扫一扫
?


http://www.vxiaotou.com