传统多列浮动

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

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

优点:

（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. opencv第二课 进行缩放图片~

    #include<stdio.h> #include<iostream> #include<opencv2\opencv.hpp> using namespace ...

  2. mysql数据库表迁移

    @ 把老数据库中的某个表倒出成sql文件 $mysqldump -uroot -p123456 my_db > my_db.sql (输入密码) @ 在新环境中导入 $sudo apt-get ...

  3. grep查看源代码用法

    http://blog.csdn.net/guyongqiangx/article/details/70161189

  4. VS2010下配置Winpcap 开发环境

    http://blog.csdn.net/taotaoyouarebaby/article/details/27326829

  5. DocumentManager在标签位置显示气泡框 z

    关于DevExpress DockManager下的DocumentManager头部标签如何显示气泡框,类似Visual studio那样显示文件的路径,如下图所示,------- 方式很简单,从工 ...

  6. Oracle中索引的使用 索引性能优化调整

    索引是由Oracle维护的可选结构,为数据提供快速的访问.准确地判断在什么地方需要使用索引是困难的,使用索引有利于调节检索速度. 当建立一个索引时,必须指定用于跟踪的表名以及一个或多个表列.一旦建立了 ...

  7. Oracle常用系统查询SQL

    以user1身份登录oracle,然后执行:select table_name from user_tables;或select table_name from tabs; 常用SQL --1.查询o ...

  8. Android图片加载框架最全解析（六），探究Glide的自定义模块功能

    不知不觉中,我们的Glide系列教程已经到了第六篇了,距离第一篇Glide的基本用法发布已经过去了半年的时间.在这半年中,我们通过用法讲解和源码分析配合学习的方式,将Glide的方方面面都研究了个遍, ...

  9. Android图片加载框架最全解析（三），深入探究Glide的缓存机制

    在本系列的上一篇文章中,我带着大家一起阅读了一遍Glide的源码,初步了解了这个强大的图片加载框架的基本执行流程. 不过,上一篇文章只能说是比较粗略地阅读了Glide整个执行流程方面的源码,搞明白了G ...

  10. 3D屏保: 线圈

    LineFlower3DSP 一个3D屏保程序,算法的原理类似于圆内轮旋线的生成. 下载地址: http://files.cnblogs.com/WhyEngine/LineFlower3D_sp.z ...