传统多列浮动

各列固定宽度，并且左浮动；
一列中的数据块为一组，列中的每个数据块依次排列即可；

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

优点:

（1）布局简单，应该说没啥特别的难点；

（2）不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。

缺点:

（1）列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；

（2）滚动加载更多数据时，还要指定插入到第几列中，还是不方便。

代码范例：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>瀑布流布局</title>
  6. <style>
  7. *{ margin:0px; padding:0px;}
  8. li{ list-style:none}
  9.  
  10. #div1{ width:760px; height:auto; margin:20px auto;}
  11. ul{ width:240px; margin:5px; float:left;}
  12. </style>
  13. </head>
  14.  
  15. <body>
  16. 	<div id="div1">
  17.     	<ul>
  18.         	<li>
  19.             	<img src="img/1.jpg" />
  20.             </li>
  21.         	<li>
  22.             	<img src="img/2.jpg" />
  23.             </li>
  24.         	<li>
  25.             	<img src="img/3.jpg" />
  26.             </li>
  27.         </ul>
  28.     	<ul>
  29.         	<li>
  30.             	<img src="img/4.jpg" />
  31.             </li>
  32.         	<li>
  33.             	<img src="img/5.jpg" />
  34.             </li>
  35.         	<li>
  36.             	<img src="img/6.jpg" />
  37.             </li>
  38.         </ul>
  39.     	<ul>
  40.         	<li>
  41.             	<img src="img/7.jpg" />
  42.             </li>
  43.         	<li>
  44.             	<img src="img/8.jpg" />
  45.             </li>
  46.         	<li>
  47.             	<img src="img/9.jpg" />
  48.             </li>
  49.         </ul>
  50.     </div>
  51. </body>
  52. </html>

绝对定位

可谓是最优的一种方案。

优点：

方便添加数据内容，窗口变化，列数/数据块都会自动调整；

缺点:

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

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

代码范例：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>定位的瀑布流</title>
  6. <style>
  7. *{ margin:0px; padding:0px;}
  8. li{ list-style:none}
  9.  
  10. #div1{ width:760px; height:auto; margin:20px auto; position:relative;}
  11. li{ position:absolute;}
  12. </style>
  13. <script language="javascript">
  14. window.onload=function(){
  15. 	var ali = document.getElementsByTagName('li');
  16. 	var aHeight={L:[],C:[],R:[]};
  17. 	for(var i = 0;i<ali.length;i++){
  18. 		var iNow=i%3;
  19. 		switch(iNow){
  20. 			case 0:
  21. 				ali[i].style.left='5px';
  22. 				aHeight.L.push(ali[i].offsetHeight);
  23. 				var step=Math.floor(i/3);
  24. 				if(!step){
  25. 					ali[i].style.top=0;
  26. 				}else{
  27. 					var sum=0;
  28. 					for(var j=0;j<step;j++){
  29. 						sum+=aHeight.L[j]+5;
  30. 					}
  31. 					ali[i].style.top=sum+'px';
  32. 				}
  33. 				break;
  34. 			case 1:
  35. 				ali[i].style.left='250px';
  36. 				aHeight.C.push(ali[i].offsetHeight);
  37. 				var step=Math.floor(i/3);
  38. 				if(!step){
  39. 					ali[i].style.top=0;
  40. 				}else{
  41. 					var sum=0;
  42. 					for(var j=0;j<step;j++){
  43. 						sum+=aHeight.C[j]+5;
  44. 					}
  45. 					ali[i].style.top=sum+'px';
  46. 				}
  47. 				break;
  48. 			case 2:
  49. 				ali[i].style.left='495px';
  50. 				aHeight.R.push(ali[i].offsetHeight);
  51. 				var step=Math.floor(i/3);
  52. 				if(!step){
  53. 					ali[i].style.top=0;
  54. 				}else{
  55. 					var sum=0;
  56. 					for(var j=0;j<step;j++){
  57. 						sum+=aHeight.R[j]+5;
  58. 					}
  59. 					ali[i].style.top=sum+'px';
  60. 				}
  61. 				break;
  62. 		}
  63. 	}
  64. }
  65. </script>
  66. </head>
  67.  
  68. <body>
  69. 	<div id="div1">
  70.     	<ul>
  71.         	<li>
  72.             	<img src="img/1.jpg" />
  73.             </li>
  74.         	<li>
  75.             	<img src="img/2.jpg" />
  76.             </li>
  77.         	<li>
  78.             	<img src="img/3.jpg" />
  79.             </li>
  80.         	<li>
  81.             	<img src="img/4.jpg" />
  82.             </li>
  83.         	<li>
  84.             	<img src="img/5.jpg" />
  85.             </li>
  86.         	<li>
  87.             	<img src="img/6.jpg" />
  88.             </li>
  89.         	<li>
  90.             	<img src="img/7.jpg" />
  91.             </li>
  92.         	<li>
  93.             	<img src="img/8.jpg" />
  94.             </li>
  95.         	<li>
  96.             	<img src="img/9.jpg" />
  97.             </li>
  98.         </ul>
  99.     </div>
  100. </body>
  101. </html>

【CSS】瀑布流布局的两种方式：传统多列浮动和绝对定位布局的更多相关文章

  1. CSS设置透明的两种方式

    1..demo{ background-color:transparent; } 2..demo{ background-color:rgba(0,0,0,0.5); //最后一个参数是用来设置透明度 ...

  2. css实现透明的两种方式及其区别

    一.opacity:0~1 值越高,透明度越低,下面为示例 选择器{ opacity:0.5 } 选择器匹配到的节点们,包括节点们的孩子节点,都会实现%50透明,另 0.5 可直接写成 .5 二.rg ...

  3. 【java并发】传统线程技术中创建线程的两种方式

    传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...

  4. css清除浮动的两种方式（clearfix和clear）

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  5. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  6. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  7. 引入外部CSS的两种方式及区别

    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...

  8. 简单说 通过CSS实现 文字渐变色 的两种方式

    说明 这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键. 解释 方式一 效果图 代码 <!DOCTYPE html> <ht ...

  9. Java并发基础01. 传统线程技术中创建线程的两种方式

    传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...

随机推荐

  1. MySQL的转义符 ` 作用

    ` 是 MySQL 的转义符,避免和 mysql 的本身的关键字冲突,只要你不在列名.表名中使用 mysql 的保留字或中文,就不需要转义. 所有的数据库都有类似的设置,不过mysql用的是`而已.通 ...

  2. JDK居然还有Server和Client模式

    JDK这货居然还分Server和Client版本,但经过观察,据说从1.7+版本开始这两者运行的区别已经逐步减少了.所以接下来的分析没啥意义. 参考: http://www.oracle.com/te ...

  3. Tasker to answer incoming call by pressing power button

    nowadays, the smartphone is getting bigger in size, eg. samsung galaxy note and note 2, sorta big in ...

  4. MVC使用Gantt Chart实现甘特图,管理事情进度

    借助"甘特图",可以直观地了解任务.活动.工作的进度.dhtmlxGantt是一个开源的Javacirpt库,能帮助我们快速创建"甘特图",本篇体验在MVC中的 ...

  5. MVC批量添加,增加一条记录的同时添加N条集合属性所对应的个体

    类别中包含一个产品的集合属性,如何向数据库添加一条类别记录的同时,添加任意多个产品. public class Product { [DisplayName("产品名称")] pu ...

  6. Spring使用环境变量控制配置文件加载(转)

    项目中需要用到很多配置文件,不同环境的配置文件是不一样的,因此如果只用一个配置文件,势必会造成配置文件混乱,这里提供一种利用环境变量控制配置文件加载的方法,如下: 一.配置环境变量 如果是window ...

  7. CentOS6.5和RedHat6.5下以rpm方式安装mysql-5.6.20

    转帖;http://blog.csdn.net/mw08091020/article/details/39234207 a.检查下linux是不是已经安装了mysql rpm -qa | grep - ...

  8. phpExcel导出文件时内存溢出的问题

    在使用PHPExcel导出文件时,经常会因为文件过大导致PHP内存溢出报错,为了解决这个问题,可以使用PHPExcel提供的参数进行优化.这里说的Excel文件过大并不一定是文件大小,更关键的在于文件 ...

  9. MySql_34道经典Sql试题

    MySql_34道经典Sql试题   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/xiaouncle/article/details/799390 ...

  10. 文件操作篇 close creat dup dup2 fcntl flock fsync lseek mkstemp open read sync write

    文件操作篇 close creat dup dup2 fcntl flock fsync lseek mkstemp open read sync write close(关闭文件) 相关函数 ope ...