css瀑布流布局

时间：2014-12-14类别：Web前端

css瀑布流布局

css瀑布流布局

瀑布流布局是现在越来越流行一种页面布局方式，希望你没有对这个名字陌生，看张图相信你就知道它是什么了。

瀑布式流式布局，这个名字是很形象的，这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。这种布局可以说是扩展了原始的格子布局，给用户更加自由，灵活的感觉，便于浏览。

瀑布流的布局方式展现的内容通常是扁平化、琐碎的东西。首先吸引人的应该是图片，并且图片是那种参差不齐的，如果瀑布流中文字过多，会给人很杂乱的感觉，所以瀑布流更适合单纯的图片浏览。

一、几种实现方式

1、传统的多列浮动

实现方式

· 各列固定宽度，并且左浮动；

· 一列中的数据块为一组，列中的每块依次排列；

· 更多数据加载时，需要分别插入到不同的列中；

优点：

· 布局简单；
· 不用明确数据块的高度，自适应即可。

缺点：

· 列数固定，嵌套较多

· 滚动加载更多数据时，需要指定插入到第几列中，不方便。

2、CSS3样式定义法

我们将要用到的是CSS3新加的column属性，通过指定容器的列个数column-count，列间距column-gap，列中间的边框(间隔边线)column-rule，列宽度column-width实现。

优点：

· 直接用CSS定义，方便快捷，是最好不过了；

· 扩展方便。

缺点：

· 目前仍有部分浏览器不支持CSS3；

· CSS3这种方式的数据排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列；

3、绝对定位

可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整；

缺点:

需要实现知道数据块高度，如果其中包含图片，需要知道图片高度；

JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。

二、css瀑布流布局实例

HTML 代码复制


<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">...
*,html{...}{margin:0px;padding:0px;}
.red{...}{color:#FFB6C1;}
.green{...}{color:#99CC99;}
.blue{...}{color:#66CCCC;}
.yellow{...}{color:#FFEE88;}

img{...}{border:0px;}
body{...}{margin:0 auto;}
.waterfall{...}{width:964px;border:1px solid #c0c0c0;margin:0px auto;display:inline-block;clear:both;}
.waterfall a{...}{ text-decoration:none;}
.waterfall a:hover{...}{ text-decoration:underline;}
.col{...}{zoom:1;width:203px;margin-right:6px;float:left;padding:14px;_padding:0px;}
.waterfall li{...}{list-style:none;width:203px;border:1px solid #a0a0a0;padding:14px;margin-top:6px;}
.fallImg{...}{ width:203px;margin:0px auto;}
.fallText{...}{width:203px;font-weight:bold;margin:0px auto 10px;}
.fallText a,.fallComment p a{...}{color:#EA4563;}
.iconText{...}{font-size:12px;color:#999;line-height:10px;}
.fallLine{...}{width:203px;border-bottom: solid 1px #999;height:25px;margin:-10px auto;}
.fallLine span{...}{border-style:solid; border-width:10px; border-color:#fff #fff #999 #fff; height:0; width:0; font-

size:0;margin-top:-20px;margin-left:24px;}
.fallComment{...}{width:203px;margin:20px auto;}
.fallComment p{...}{font-size:12px;color:#666;border-bottom:1px dotted #c0c0c0;padding-bottom:8px;margin-top:20px;}
 </style>
</head>
<body>
<li class="waterfall" id="waterfall">
 <ul class="col" id="col_1">
  <li>
    <li class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></li>
    <p class="fallText"><a href="">ffff</a></p>
    <li class="fallLine">
     <span></span>
    </li>
    <li class="fallComment">
      <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p>
      <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p>
    </li>
  </li>
  <li>
    <li class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></li>
    <p class="fallText"><a href="">ffff</a></p>
    <li class="fallLine">
     <span></span>
    </li>
    <li class="fallComment">
      <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p>
      <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p>
      <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p>
    </li>
  </li>
  <li>
    <li class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></li>
    <p class="fallText"><a href="">ffff</a></p>
    <li class="fallLine">
     <span></span>
    </li>
    <li class="fallComment">
      <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p>
      <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p>
      <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p>
      <p><a href="">摩尔大忽悠:</标签：css布局

css瀑布流布局

css瀑布流布局

猜您喜欢

热门推荐