cuclife.com > IT > CSS > 0

css瀑布流布局的方法及示例演示

CSS学习 - 02-07

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

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

一、几种实现方式

1、传统的多列浮动

实现方式

· 各列固定宽度，并且左浮动；
· 一列中的数据块为一组，列中的每块依次排列；
· 更多数据加载时，需要分别插入到不同的列中；
 
优点：
· 布局简单；
· 不用明确数据块的高度，自适应即可。

 缺点：
· 列数固定，嵌套较多
· 滚动加载更多数据时，需要指定插入到第几列中，不方便。
 

2、CSS3样式定义法

我们将要用到的是CSS3新加的column属性，通过指定容器的列个数column-count，列间距column-gap，列中间的边框(间隔边线)column-rule，列宽度column-width实现。
 
优点：
· 直接用CSS定义，方便快捷，是最好不过了；
· 扩展方便。
 
缺点：
· 目前仍有部分浏览器不支持CSS3；
· CSS3这种方式的数据排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列；

3、绝对定位

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

缺点:

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

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

二、css瀑布流布局实例

  1.              
  2. <!doctype html> 
  3. <html> 
  4. <head> 
  5. <title></title> 
  6. <style type="text/css"> 
  7. *,html{}{margin:0px;padding:0px;} 
  8. .red{}{color:#FFB6C1;} 
  9. .green{}{color:#99CC99;} 
  10. .blue{}{color:#66CCCC;} 
  11. .yellow{}{color:#FFEE88;} 
  12.  
  13. img{}{border:0px;} 
  14. body{}{margin:0 auto;} 
  15. .waterfall{}{width:964px;border:1px solid #c0c0c0;margin:0px auto;display:inline-block;clear:both;} 
  16. .waterfall a{}{ text-decoration:none;} 
  17. .waterfall a:hover{}{ text-decoration:underline;} 
  18. .col{}{zoom:1;width:203px;margin-right:6px;float:left;padding:14px;_padding:0px;} 
  19. .waterfall li{}{list-style:none;width:203px;border:1px solid #a0a0a0;padding:14px;margin-top:6px;} 
  20. .fallImg{}{ width:203px;margin:0px auto;} 
  21. .fallText{}{width:203px;font-weight:bold;margin:0px auto 10px;} 
  22. .fallText a,.fallComment p a{}{color:#EA4563;} 
  23. .iconText{}{font-size:12px;color:#999;line-height:10px;} 
  24. .fallLine{}{width:203px;border-bottom: solid 1px #999;height:25px;margin:-10px auto;} 
  25. .fallLine span{}{border-style:solid; border-width:10px; border-color:#fff #fff #999 #fff; height:0; width:0; font- 
  26.  
  27. size:0;margin-top:-20px;margin-left:24px;} 
  28. .fallComment{}{width:203px;margin:20px auto;} 
  29. .fallComment p{}{font-size:12px;color:#666;border-bottom:1px dotted #c0c0c0;padding-bottom:8px;margin-top:20px;} 
  30.  </style> 
  31. </head> 
  32. <body> 
  33. <div class="waterfall" id="waterfall"> 
  34.  <ul class="col" id="col_1"> 
  35.   <li> 
  36.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  37.     <p class="fallText"><a href="">ffff</a></p> 
  38.     <div class="fallLine"> 
  39.      <span></span> 
  40.     </div> 
  41.     <div class="fallComment"> 
  42.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  43.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  44.     </div> 
  45.   </li> 
  46.   <li> 
  47.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  48.     <p class="fallText"><a href="">ffff</a></p> 
  49.     <div class="fallLine"> 
  50.      <span></span> 
  51.     </div> 
  52.     <div class="fallComment"> 
  53.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  54.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  55.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  56.     </div> 
  57.   </li> 
  58.   <li> 
  59.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  60.     <p class="fallText"><a href="">ffff</a></p> 
  61.     <div class="fallLine"> 
  62.      <span></span> 
  63.     </div> 
  64.     <div class="fallComment"> 
  65.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  66.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  67.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  68.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  69.     </div> 
  70.   </li> 
  71.   <li> 
  72.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  73.     <p class="fallText"><a href="">ffff</a></p> 
  74.     <div class="fallLine"> 
  75.      <span></span> 
  76.     </div> 
  77.     <div class="fallComment"> 
  78.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  79.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  80.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  81.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  82.     </div> 
  83.   </li> 
  84.   </ul> 
  85.  <ul class="col" id="col_2"> 
  86.   <li> 
  87.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  88.     <p class="fallText"><a href="">ffff</a></p> 
  89.     <div class="fallLine"> 
  90.      <span></span> 
  91.     </div> 
  92.     <div class="fallComment"> 
  93.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  94.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  95.     </div> 
  96.   </li> 
  97.   <li> 
  98.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  99.     <p class="fallText"><a href="">ffff</a></p> 
  100.     <div class="fallLine"> 
  101.      <span></span> 
  102.     </div> 
  103.     <div class="fallComment"> 
  104.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  105.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  106.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  107.     </div> 
  108.   </li> 
  109.   <li> 
  110.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  111.     <p class="fallText"><a href="">ffff</a></p> 
  112.     <div class="fallLine"> 
  113.      <span></span> 
  114.     </div> 
  115.     <div class="fallComment"> 
  116.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  117.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  118.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  119.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  120.     </div> 
  121.   </li> 
  122.   <li> 
  123.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  124.     <p class="fallText"><a href="">ffff</a></p> 
  125.     <div class="fallLine"> 
  126.      <span></span> 
  127.     </div> 
  128.     <div class="fallComment"> 
  129.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  130.     </div> 
  131.   </li> 
  132.   </ul> 
  133.  <ul class="col" id="col_3"> 
  134.   <li> 
  135.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  136.     <p class="fallText"><a href="">ffff</a></p> 
  137.     <div class="fallLine"> 
  138.      <span></span> 
  139.     </div> 
  140.     <div class="fallComment"> 
  141.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  142.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  143.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  144.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  145.     </div> 
  146.   </li> 
  147.   <li> 
  148.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  149.     <p class="fallText"><a href="">ffff</a></p> 
  150.     <div class="fallLine"> 
  151.      <span></span> 
  152.     </div> 
  153.     <div class="fallComment"> 
  154.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  155.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  156.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  157.     </div> 
  158.   </li> 
  159.   <li> 
  160.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  161.     <p class="fallText"><a href="">ffff</a></p> 
  162.     <div class="fallLine"> 
  163.      <span></span> 
  164.     </div> 
  165.     <div class="fallComment"> 
  166.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  167.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  168.     </div> 
  169.   </li> 
  170.   <li> 
  171.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  172.     <p class="fallText"><a href="">ffff</a></p> 
  173.     <div class="fallLine"> 
  174.      <span></span> 
  175.     </div> 
  176.     <div class="fallComment"> 
  177.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  178.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  179.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  180.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  181.     </div> 
  182.   </li> 
  183.   </ul> 
  184.  <ul class="col" id="col_4"> 
  185.   <li> 
  186.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  187.     <p class="fallText"><a href="">ffff</a></p> 
  188.     <div class="fallLine"> 
  189.      <span></span> 
  190.     </div> 
  191.     <div class="fallComment"> 
  192.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  193.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  194.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  195.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  196.     </div> 
  197.   </li> 
  198.   <li> 
  199.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  200.     <p class="fallText"><a href="">ffff</a></p> 
  201.     <div class="fallLine"> 
  202.      <span></span> 
  203.     </div> 
  204.     <div class="fallComment"> 
  205.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  206.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  207.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  208.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  209.     </div> 
  210.   </li> 
  211.   <li> 
  212.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  213.     <p class="fallText"><a href="">ffff</a></p> 
  214.     <div class="fallLine"> 
  215.      <span></span> 
  216.     </div> 
  217.     <div class="fallComment"> 
  218.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  219.     </div> 
  220.   </li> 
  221.   <li> 
  222.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  223.     <p class="fallText"><a href="">ffff</a></p> 
  224.     <div class="fallLine"> 
  225.      <span></span> 
  226.     </div> 
  227.     <div class="fallComment"> 
  228.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  229.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  230.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  231.     </div> 
  232.   </li> 
  233.   <li> 
  234.     <div class="fallImg"><a href=""><img src="图片URL" width="203px"/></a></div> 
  235.     <p class="fallText"><a href="">ffff</a></p> 
  236.     <div class="fallLine"> 
  237.      <span></span> 
  238.     </div> 
  239.     <div class="fallComment"> 
  240.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  241.       <p><a href="">摩尔大忽悠:</a> 酷奇卡！</p> 
  242.     </div> 
  243.   </li> 
  244. </ul> 
  245. </div> 
  246. <div style="width:964px;height:20px;margin-left:450px;font-size:12px;color:#555;cursor:pointer;font-weight:bold;"  
  247.  
  248. id="loadWaterFall">点击加载更多</div> 
  249. <script type="text/javascript" src="http://image.studyofnet.com/studyofnet/javascript/jquery-1.4.js"></script> 
  250. <script type="text/javascript"> 
  251.   function makeWaterFallItem(data){ 
  252.     var li = '<li><div class="fallImg">' 
  253.              + '<a href=""><img src="images/'+data+'.jpg" width="203px"/></a></div>' 
  254.              + '<p class="fallText"><a href="">ffff</a></p>' 
  255.              + '<div class="fallLine"><span></span></div>' 
  256.              + '<div class="fallComment">' 
  257.              + '<p><a href="">摩尔大忽悠:</a> 酷奇卡！</p>' 
  258.              + '<p><a href="">摩尔大忽悠:</a> 酷奇卡！</p>' 
  259.              + '<p><a href="">摩尔大忽悠:</a> 酷奇卡！</p>' 
  260.              + '<p><a href="">摩尔大忽悠:</a> 酷奇卡！</p>' 
  261.              + '</div></li>'; 
  262.     return li; 
  263.   } 
  264.   $(document).ready(function(){ 
  265.      $("#loadWaterFall").click(function(){ 
  266.      for(var j=1;j<=4;j++){ 
  267.        var li = ""; 
  268.        for(var i=1;i<=4;i++){ 
  269.         var data = ""; 
  270.         li += makeWaterFallItem(i);  
  271.        } 
  272.        $(li).appendTo($("#col_"+j)); 
  273.      } 
  274.     }); 
  275.   }); 
  276. </script> 
  277.  
  278. </body> 
  279. </html> 
 
▪ 窗口全屏垂直居中的方法
▪ CSS控制ul缩进间距和去掉li点的方法
▪ IE6下文字line-height失效的解决方法
▪ CSS创建竖排文字的七种方法
▪ IE下判断IE版本的语句及其使用方法
▪ CSS3与CSS1实现双线框方法的比较
▪ 解决pre标签里文本无法自动换行的方法
▪ CSS挂马知识及其防范方法