【CSS】瀑布流布局的两种方式：传统多列浮动和绝对定位布局_云涛连雾的博客-程序员资料

技术标签： css Web 布局定位 html 瀑布流

传统多列浮动

各列固定宽度，并且左浮动；
一列中的数据块为一组，列中的每个数据块依次排列即可；
更多数据加载时，需要分别插入到不同的列上；

优点:

（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.οnlοad=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>

本文链接：https://blog.csdn.net/oYunTaoLianWu/article/details/10315115

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

JavaScript类和模块_小小码农2的博客-程序员资料

JavaScript是基于对象的，每个JavaScript对象都是一个属性的集合，相互之间没有任何联系，在JavaScript中也可以定义对象的类，让每个对象都共享某些属性。在JavaScript中，类的实现是基于原型继承机制的。如果俩个实例都从同一个原型对象上继承了属性，我们就说他们是同一个类的实例。如果俩个对象继承自同一个原型，往往意味着他们是有一个构造函数创建并初始化的。JavaScript

Win10获得system权限（即超级管理员）_菲菲夜的博客-程序员资料_win10system权限怎么获得

某一个文件进行操作需要获取system权限。（比较安全，因为只是这个文件夹，反正你要删掉了）5.1.右键文件夹，选择“属性”，选择"安全"，点击右下角的“高级”按钮。5.2.点击所有者后面的“更改”5.3.在对象名称中输入“everyone”，点击“检查名称”，看到everyone变为“Everyone”后点击确定。5.4.勾选“替换子容器和对象的所有者”，在弹出的对话框中选择“确定”即可。5.5.就可以删除文件了。不需要重启哦。5.6 这个方法是在微软官方社区看到的。这里附上链接并

线上环境出现java.lang.OutOfMemoryError: Java heap space_cruder丶的博客-程序员资料

1、线上技术同事反应经常过一个月之后就会出现系统访问不了，然后后端的日志取回来发现问题Caused by: java.lang.OutOfMemoryError: Java heap space at org.apache.xmlbeans.impl.values.XmlObjectBase.check_dated(XmlObjectBase.java:1318) at org.apache.xmlbeans.impl.values.XmlObjectBase.getStringValue(Xml

go:missing Git command._benben_2015的博客-程序员资料

go:missing Git command.See https://golang.org/s/gogetcmd package github.com/astaxie/beego:exec:”git”:executable file not found in $PATH在使用Go命令时出现上面的错误，其原因大概有两种：一是没有安装Git；二是虽然安装了Git，但环境变量没设置或设置有问题。针对不同的_1671465600

MySQL 给已存在的数据表增加字段和注释_weixin_38168559的博客-程序员资料

MySQL 给已存在的数据表增加字段和注释问题描述在开发一个系统的过程中，经常会遇到随着系统服务功能的扩展后者服务之间的关联，需要适当的修改原有的表结构，比如，增加一些必要的字段。示例：在已存在的设备表device中，增加设备IP，设备名称，设备类型三个字段。问题解决方式1（命令行方式）使用MySQL命令，在MySQL客户端工具或者命令行中，...

mysqld_safe的作用_fengyun125a的博客-程序员资料

官方推荐在类UNIX系统中使用mysqld_safe脚本来启动mysqld进程，严重错误产生时自动重启mysqld进程