传统多列浮动

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

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

优点:

（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学习笔记（八）—集合的学习

    集合(set)是一个无序不重复元素的序列. 基本功能是进行成员关系测试和删除重复元素. 1.集合的作用 它可以把一个列表中重复的数据去掉,而不需要你再写判断 可以做关系测试,比如说有两个科目,一个数学 ...

  2. linux—文件目录简单介绍

    1.Linux系统以文件目录的方式来组织和管理系统中的所有文件.所谓文件目录就是将所有文件的说明信息采用树型结构组织起来,即我们常说的目录:整个文件系统有一个“根”(root),然后在根上分“杈”(d ...

  3. How do I use Tasker to run a sync in FolderSync?

    First of all the full version is required.     The full version works as a Tasker plugin - when you ...

  4. WordPress Permissions Update Error [RESOLVED]

    Recently I ran into an issue where an installation of WordPress that had never had any issues updati ...

  5. HTML中显示的文字自动换行

    在html中控制自动换行 http://www.cnblogs.com/zjxbetter/articles/1323449.html eg: <table> <tr> < ...

  6. [转载] 为Visual Studio添加默认INCLUDE包含路径的方法

    原文地址 你是否曾经也有过这样的问题: 用VS的时候,有时会用到一些非自带的库,例如WTL.Boost.DX等,每次需要用到时都要在项目属性里添加相应的include目录,久而久之觉得有点麻烦.是否有 ...

  7. 将数据处理逻辑集中到一处进行管理，逐步实现真正有效的 MVC 分层结构

    将数据处理逻辑集中到一处进行管理,逐步实现真正有效的 MVC 分层结构.

  8. C语言函数库

    C语言函数库 分类函数目录函数进程函数诊断函数接口子程序输入输出 str字符串操作函数mem操作存贮数组 数学函数 时间日期函数 转换函数 分类函数,所在函数库为ctype.h[top] int is ...

  9. 解决hue/hiveserver2对于hive date类型显示为NULL的问题

    用户报在Hue中执行一条sql:select admission_date, discharge_date,birth_date from hm_004_20170309141149.inpatien ...

  10. C语言的32个保留字

    auto :声明自动变量 double :声明双精度变量或函数 int: 声明整型变量或函数 struct:声明结构体变量或函数 break:跳出当前循环 else :条件语句否定分支(与 if 连用 ...