传统多列浮动

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

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

优点:

（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=utf-8" />

<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="img/1.jpg" />

            </li>

        	<li>

            	<img src="img/2.jpg" />

            </li>

        	<li>

            	<img src="img/3.jpg" />

            </li>

        </ul>

    	<ul>

        	<li>

            	<img src="img/4.jpg" />

            </li>

        	<li>

            	<img src="img/5.jpg" />

            </li>

        	<li>

            	<img src="img/6.jpg" />

            </li>

        </ul>

    	<ul>

        	<li>

            	<img src="img/7.jpg" />

            </li>

        	<li>

            	<img src="img/8.jpg" />

            </li>

        	<li>

            	<img src="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=utf-8" />

<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="img/1.jpg" />

            </li>

        	<li>

            	<img src="img/2.jpg" />

            </li>

        	<li>

            	<img src="img/3.jpg" />

            </li>

        	<li>

            	<img src="img/4.jpg" />

            </li>

        	<li>

            	<img src="img/5.jpg" />

            </li>

        	<li>

            	<img src="img/6.jpg" />

            </li>

        	<li>

            	<img src="img/7.jpg" />

            </li>

        	<li>

            	<img src="img/8.jpg" />

            </li>

        	<li>

            	<img src="img/9.jpg" />

            </li>

        </ul>

    </div>

</body>

</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. python开发_xml.etree.ElementTree_XML文件操作_该模块在操作XML数据是存在安全隐患_慎用

    xml.etree.ElementTree模块实现了一个简单而有效的用户解析和创建XML数据的API. 在python3.3版本中,该模块进行了一些修改: xml.etree.cElementTree ...

  2. JavaScript惰性函数定义

    函数是js世界的一等公民,js的动态性.易变性在函数的应用上,体现的淋漓尽致.做为参数,做为返回值等,正是函数这些特性,使得js开发变的有趣. 下面就阐述一下,js一个有趣的应用--惰性函数定义(La ...

  3. 记一次完整的pc前端整站开发

    我所做的项目是一个线上的旅游平台,当然不是大家耳熟能详的那些旅游平台了,项目刚开始也没有必要去评价它的好坏,在这里我就不多说了~这是线上地址有兴趣的同学可以去看看(www.bookingctrip.c ...

  4. 读书笔记_Effective_C++_条款三十七：绝不重新定义继承而来的缺省参数值

    先看下面的例子: enum MyColor { RED, GREEN, BLUE, }; class Shape { public: ; }; class Rectangle: public Shap ...

  5. js面向对象写页面

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. SyncThingWin -- Run syncthing as a windows service

    SyncThingWin Auto restart and minor bug fixes bloones released this on 23 Dec 2014 There is now an a ...

  7. oracle sql语句怎么查询所有存储过程中是否包含某个注释？

    select text from all_source where type='PROCEDDURE' and name='过程名'and instr(text,'注释内容')>0

  8. java中的几种对象(PO,VO,DAO,BO,POJO)

    一.PO :(persistant object ),持久对象 可以看成是与数据库中的表相映射的java对象.使用Hibernate来生成PO是不错的选择. 二.VO :(value object) ...

  9. Assembly类

    System.Reflection.Assembly类是一个比较常用到的类,在反射中就经常用到. 由于这个类实在有太多的字段.属性与方法.实在不想将一个个属性方法从MSDN复制出来然后逐个属性.方法敲 ...

  10. Leptonica在VS2010中的编译及简单使用举例

    在tesseract-ocr中会用到leptonica库.这里对leptonica简介下. Leptonica是一个开源的图像处理和图像分析库,它的license是BSD 2-clause.它主要包括 ...