JS案例之6——瀑布流布局(1)
在实际的项目中，偶尔会用到一种布局——瀑布流布局。瀑布流布局的特点是，在多列布局时，可以保证内容区块在水平方向上不产生大的空隙，类似瀑布的效果。简单的说，在垂直列表里，内容区块是一个挨着一个的。当内容较多且不固定时，就依赖于html结构的顺序，非常受限制。这里给了一个简单的例子，只要传入列表的数量和宽度，就可以动态的将数据放到对应的列里。
原理
1.定义两个容器，一个是存放内容，一个是要展示的列表。
2.将每列的offsetHeight存入一个数组里，比较得出最小的那一列，然后把数据放到最小的列里。判断当存放内容的容器为空时，就说明里面的数据已经全部放到对应的列里了。
注意：这个函数需要在window.onload之后执行，不然每个内容区块的高度读不出来，会导致每一列的offsetHeight不准确。
源代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>waterfall布局</title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content="waterfall布局" />
<style>
*{margin:0;padding:0;}
li{list-style:none;} .list li{float:left;min-height:10px;margin:0 0 0 20px;}
.list .item{margin:0 0 10px;}
.list img{display:block;width:100%;}
</style>
</head> <body>
<div class="content" id="content">
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_101.jpg" />01</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_102.jpg" />02</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_103.jpg" />03</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_104.jpg" />04</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_105.jpg" />05</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_106.jpg" />06</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_107.jpg" />07</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_108.jpg" />08</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_109.jpg" />09</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_110.jpg" />10</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_111.jpg" />11</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_112.jpg" />12</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_113.jpg" />13</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_114.jpg" />14</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_115.jpg" />15</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_116.jpg" />16</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_117.jpg" />17</div>
</div>
<div class="list" id="list"></div> <script>
var waterFall = {
content:document.getElementById('content'), //存放内容的容器
list:document.getElementById('list'), //将要展示的列表容器 setOptions:function(options){
options = options || {};
this.colNum = options.num || 3; //显示的列数，默认显示3列
this.colWidth = options.width || 200; //每列的宽度
}, //构建列数
setColumn:function(){
var self = this;
var html = '';
for(var i=0,l=self.colNum;i<l;i++){
html += '<li style="width:'+ self.colWidth +'px;"></li>';
}
self.list.innerHTML = html; self.column = self.list.getElementsByTagName('li');
}, //计算最小高度的列
setMinHeightCol:function(){
var self = this;
var heiArray = [];
var minIndex = 0,index = 1;
for(var i=0,l=self.colNum;i<l;i++){
heiArray[i] = self.column[i].offsetHeight;
}
while(heiArray[index]){
if(heiArray[index] < heiArray[minIndex]){
minIndex = index;
}
index ++;
}
return self.column[minIndex];
}, //填充内容
setCont:function(cnt){
var self = this;
self.setMinHeightCol().appendChild(cnt);
if(!!self.content.children[0]){
self.setCont(self.content.children[0]);
}
}, init:function(options){
var self = this;
window.onload = function(){
self.setOptions(options);
self.setColumn();
self.setCont(self.content.children[0]);
}
}
}; waterFall.init();
</script>
</body>
</html>
JS案例之6——瀑布流布局(1)的更多相关文章
- JS案例之7——瀑布流布局(2)
这个例子与上一篇类似,唯一的区别是排序的方式有差别.上一篇是在高度最小的列里插入内容,这个案例是按顺序放置内容. 两种方法各有优缺点.第一种需要在图片内容加载完成的情况下有效.这个例子不需要在wind ...
- JS原生方法实现瀑布流布局
html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...
- JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- 纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- JS瀑布流布局模式(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
- js网页瀑布流布局
瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...
- JS瀑布流布局
好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...
- 瀑布流布局js
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- Bootstrap实战 - 瀑布流布局
讲 Bootstrap 基础的教程网上已经很多了,实际上 Bootstrap 中文网(bootcss.com)里的文档已经写的很详细了,但实战的案例却不多.这里用一些当前流行的网页布局为导向,使用 B ...
随机推荐
- Effective Java 32 Use EnumSet instead of bit fields
Bit fields is used for passing around sets of constants. Such as // Bit field enumeration constants ...
- 未能找到元数据文件“引用的DLL的路径”
使用VS的时候 偶尔会出现错误 [未能找到元数据文件“引用的DLL的路径”] 但是实际上项目中这些DLL都是做了引用的,甚至你前一天打开还是好好的,睡一觉起来 不知道什么原因 就酱紫了 原因:不详 ...
- Nde模块篇
/*模块分为两种:原生模块和文件模块.原生模块即Node.js API提供的原生模块,原生模块在启动时已经被加载.文件模块即为动态加载模块,加载文件模块的工作主要由原生模块 module 来实现和完成 ...
- Eclipse 快捷键 篇
1. Ctrl+Shift+R:打开资源这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.xml ...
- 烂泥：centos6.4服务器添加新硬盘
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 公司FTP服务器的空间又不够了,唉,没有办法只能新加硬盘了.因为以前没有给Linux服务器添加过硬盘,所以只能先在虚拟机中进行模拟. 新加硬盘的操作步骤 ...
- C#与MATLAB混合编程
C#和MatLab的混合编程,充分利用了winform的直观显示和matlab的强大计算能力.在此以一个小例子的形式给大家讲述一下二者混合编程的实现. 一.软件的配置说明 C#版本:VS2010 ma ...
- 虚拟机Linux----Ubuntu1204----安装jdk1.8
1.介绍 这里主要讲一下,如何在Ubuntu1204下通过压缩包的方式安装jdk1.8,rpm的直接运行就行了. 2.步骤 2.1 下载 地址:http://www.oracle.com/techne ...
- POJ 2823 Sliding Window
Sliding Window Time Limit: 12000MSMemory Limit: 65536K Case Time Limit: 5000MS Description An array ...
- multiprocessing module in python(转）
序.multiprocessing python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了非常好用的多进程包mu ...
- SQL Server 2012 AlwaysOn集群配置指南
1. AlwaysOn介绍 AlwaysOn是SQL Server 2012提供的全新综合.灵活.高效经济的高可用性和灾难恢复解决方案.它整合了镜像和群集的功能,基于OS 故障转移群集(Windows ...