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="">摩尔大忽悠:</标签: