【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>


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: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进程

随便推点

VMWare12安装OSX10.10_oldmtn的博客-程序员资料

下面是从网络转载的,我根据他的方法安装成功了。但是我的环境和他有点区别:我是Win7 64位 + VMWare12需要注意的地方就是,Win7 64位安装的时候需要开启 “Inter Virtual Technonlgy“。开启方法可见:软件虚拟化与此平台上的长模式不兼容. 长模式已禁用. http://bbs.kafan.cn/thread-1511277

ORACLE物化视图- 循序渐进MView(六) MView管理_outget1的博客-程序员资料_mview文件数据大小怎么改

MView重要视图在源数据库端的相关视图DBA_BASE_TABLE_MVIEWSDBA_REGISTERED_MVIEWSDBA_MVIEW_LOGS在MView数据库端的相关视图DBA_MVIEWSDBA_MVIEW_REFRESH_TIMESDBA_REFRESH和DBA_REFRESH_CHILDRENMView相关包一些MView维护的相关问题SNAPSHOT vs. Materia

[HNOI2011] 任务调度_HT008_123的博客-程序员资料

题目描述:有N个任务,每个任务有两个参数 A B 分别表示本任务在机器A上运行的时间和机器B上运行的时间 有三种类型的任务 1 任务需要先在A上运行再在B上运行 2 任务需要先在B上运行再在A上运行 3 任务谁先都可以 求运行完这些任务的最少时间题目分析:先暴力枚举3任务,将这个任务归为1或者二任务 贪心: 所有先做任务A的按照a时间从大到小排序,先做任务B的同 ...

基于C#的AutoCAD二次开发之块操作_努力搬砖的giser的博客-程序员资料_c#调用cad进行块操作

基于C#的AutoCAD二次开发之块操作什么是块?块由多个在逻辑上相关的图形对象所定义的整体。块的优点有哪些统一作业标准、提高作业效率压缩图形文件便于修改和维护块的分类块的分类简单块、属性块、动态块块的操作主要由哪些?块的定义(命令Block)块的插入(命令Insert)块的编辑块的操作方法块是存储于块表记录中的实体对象集合;模型空间是存储于块表记...

ant desgin vue 兼容IE9以上配置_xkxnq的博客-程序员资料

vue cli3搭建项目,[email protected]在babel.config.js文件下加入安装npm install babel-polyfill --save 或者 cnpm install babel-polyfill --savemodule.exports = { presets: [ '@vue/app', // 兼容配置 [ ...

ReactiveCocoa之RACSubject用法(四)_Ansel_m的博客-程序员资料

1.RACSubject:RACSubject:信号提供者,自己可以充当信号,又能发送信号。2.使用场景:通常用来代替代理,有了它,就不必要定义代理了。需求:1.给当前控制器添加一个按钮,push到另一个控制器界面2.另一个控制器view中有个按钮,点击按钮,返回控制器的第一个页面和接收到第二个界面的消息第一个界面:[objc] view

推荐文章

热门文章

相关标签