传统多列浮动

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

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

优点:

（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. ZOJ 3632 K - Watermelon Full of Water 优先队列优化DP

    K - Watermelon Full of Water Time Limit:3000MS     Memory Limit:65536KB     64bit IO Format:%lld &am ...

  2. SVN服务端的版本对比及创建仓库时的注意事项

    SVN是一个开放源代码的版本控制系统,分为客户端和服务端.就windows系统而言,客户端通常使用 TortoiseSVN,下载地址:https://tortoisesvn.net/  ,而服务端通常 ...

  3. 【ButterKnife】 安卓程序猿的一大利器

    注:近期才看到的这个类库,来自于jakewharton大神的力作,安卓里面的视图注入库 另小弟水平有限,翻译的不好,还请多多指正 首先是地址(托管在github上):http://jakewharto ...

  4. SSH深度历险（四） Maven初步学�

    这几天接触这个词,非常多遍了,仅仅是浅显的体会到它在GXPT中的优点,功能之强大,又通过网络查询了资料进一步的认识学习了,和大家分享. Maven是基于项目对象模型(POM),能够通过一小段描写叙述信 ...

  5. Vue2.1.7源码学习

    原本文章的名字叫做<源码解析>,不过后来想想,还是用“源码学习”来的合适一点,在没有彻底掌握源码中的每一个字母之前,“解析”就有点标题党了.建议在看这篇文章之前,最好打开2.1.7的源码对 ...

  6. error MSB8031: Building an MFC project for a non-Unicode character set is deprecated

    vs2013编译VC++源码,错误: error MSB8031: Building an MFC project for a non-Unicode character set is depreca ...

  7. C#引用类型转换,到底使用is,as还是显式强转?

    在C#中,当引用类型需要转换的时候,经常会用到关键字is.as以及显式强转.本篇来体验这三者的用法. 先来梳理.NET引用类型转换的"约定俗成",或者叫"惯例" ...

  8. java classpath作用

    环境变量的配置: 1):永久配置方式:JAVA_HOME=%安装路径%\Java\jdk path=%JAVA_HOME%\bin 2):临时配置方式:set path=%path%;C:\Progr ...

  9. oracle extract函数

    oracle Extract 函数 //oracle中extract()函数从oracle 9i中引入,用于从一个date或者interval类型中截取到特定的部分   //语法如下:   EXTRA ...

  10. 单点登录 之 OAuth

    OAuth2.0是什么 OAuth2.0是什么——豆瓣和QQ的故事 OAuth简单说就是一种授权的协议,只要授权方和被授权方遵守这个协议去写代码提供服务,那双方就是实现了OAuth模式. 举个例子,你 ...