JS案例之7——瀑布流布局(2)
这个例子与上一篇类似，唯一的区别是排序的方式有差别。上一篇是在高度最小的列里插入内容，这个案例是按顺序放置内容。
两种方法各有优缺点。第一种需要在图片内容加载完成的情况下有效。这个例子不需要在window.onload之后执行，直接计算每列的索引，按照顺序一列一列的放置。用下面的图做说明。
说明：
上一个案例如下图：
源代码：
<!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;}
p{margin:20px;} .list li{float:left;min-height:10px;margin:0 0 0 20px;}
.list .item{margin:0 0 10px;}
.list img{display:block;width:100%;} #content{display:none;}
</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');
}, //填充内容
setCont:function(cnt){
var self = this;
self.index = self.index%self.colNum || 0; //将要放置内容的列的索引，默认从0开始
self.column[self.index].appendChild(cnt);
self.index ++;
if(!!self.content.children[0]){
self.setCont(self.content.children[0]);
}
}, init:function(options){
var self = this;
self.setOptions(options);
self.setColumn();
self.setCont(self.content.children[0]);
}
}; waterFall.init();
</script>
</body>
</html>
下载地址: http://pan.baidu.com/s/1jG0ygVO
JS案例之7——瀑布流布局(2)的更多相关文章
- JS案例之6——瀑布流布局(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
- 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 ...
随机推荐
- IOS开发－表单控件的应用
1. 需求描述 2. 开发环境介绍 3. 创建一个工程 4. 工程配置介绍 5. 目录结构介绍 6. 界面设置 7. 关联输入输出 8. 关联事件代码 9. 运行结果 10. UITextField ...
- 抓包工具charles使用教程指南
0x01 前言: Charles是一款抓包修改工具,相比起burp,charles具有界面简单直观,易于上手,数据请求控制容易,修改简单,抓取数据的开始暂停方便等等优势!下面来详细介绍下这款强大好用的 ...
- MTOM以及在WCF中的应用
关于MTOM的基本概念 提到MTOM消息优化传输机制,通常的实验结果是使用MTOM传输数据会提高大约33%的性能. 消息传输优化机制 (MTOM) 标准允许将消息中包含的大型数据元素外部化,并将其作为 ...
- linux下RTNETLINK answers: File exists的解决方案
重启网卡时 出现 :RTNETLINK answers: File exists 提示 以下是网卡出来错误的解决方法: 第一种: 和 NetworkManager 服务有冲突,这个好解决,直接关闭 ...
- git 换行符LF与CRLF转换问题
git 换行符LF与CRLF转换问题 一.背景 在各操作系统下,文本文件所使用的换行符是不一样的.UNIX/Linux 使用的是 0x0A(LF),早期的 Mac OS 使用的是0x0D(CR),后来 ...
- Sublime Text 2 (for OS X )配置成可以运行基于python3解释器的 .py文件
Mac自带的python 其version是python 2.7 官网下的Sublime Text 2部署好了以后默认也是 为了使ST2 可以在command+B时可以运行基于python3的.py, ...
- 【分享】iTOP-4412开发板使用之初体验[多图]
近期入手了4412开发板,配的7寸屏和WIFI模块,GPS模块,下面晒个照片介绍一下,手机拍摄图片有点模糊,实物很精致,是我所见过最好的板子.b(￣▽￣)d 预装的Android4.0.3系统,5点以 ...
- ffmpeg编译x264, 这个libffmpeg即可解码又可以h264编码
http://blog.csdn.net/u012917616/article/details/40921861 不废话,直接上.sh脚本: export NDK=/home/xxx/my_sof ...
- Hadoop Yarn core concepts
The fundamental idea of YARN is to split the two major responsibilities of the JobTracker—that is, r ...
- 使用LVS实现负载平衡之Windows Server 2008配置
LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一.承载于 II ...