传统多列浮动

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

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

优点:

（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. sql中如何统计一字段中字符串的个数

    declare @s varchar(100)set @s='156434A27kAsdABCiosd-01&**('--找出现的次数select len(@s)-len(replace(@s ...

  2. 嵌入式设备hacking（转）

    原帖地址:http://drops.wooyun.org/papers/5157 0x00 IPCAM hacking TOOLS github-binwalk firmware-mod-kit ID ...

  3. How to edit the init.rc in android

      We have to perform the following steps to edit your init.rc successfully:   . Download the BOOT (R ...

  4. WindowsAPI详解——GetDriveType 获得逻辑驱动器的类型

    http://flyxxtt.blogbus.com/logs/43181576.html 函数原型:UINT GetDriveType(LPCTSTR lpRootPathName) 参数lpRoo ...

  5. web服务器boa的移植

    1.下载官方网站 http://www.boa.org/ 我下载的是0.94.13版本 2.解压 tar -zxvf boa-0.94.13.tar.gz 3.进入src目录 ./configure ...

  6. Linux线程 之 线程 线程组 进程 轻量级进程（LWP） -systemtap -mysql

    http://blog.chinaunix.net/uid-24774106-id-3650136.html http://blog.itpub.net/15480802/viewspace-7627 ...

  7. javascript 实现页面加载完的操作

    document.onreadystatechange = function () { if (document.readyState == "complete") {//页面加载 ...

  8. 用Redis实现分布式锁以及redission使用

    原文:https://my.oschina.net/wangnian/blog/668830 前言:分布式环境有很多问题,比如你前一个请求访问的是服务器A,第二个请求访问到了服务器B,就会发生并发重复 ...

  9. 【spring cloud】【docker】使用docker在centOS上部署spring cloud微服务架构服务

    项目GitHub地址 ================================================================================== 部署过程: ...

  10. SQL：查询学习笔记

    SQL 查询命令 SELECT 语法 SELECT "column_name" FROM "table_name"; 返回一列 SELECT Username ...