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开发笔记12:iOS7上UITextField限制字数输入导致崩溃问题
在一些场景中,需要限制用户的输入字数,例如在textField里进行控制(textView也类似,崩溃原因也相同),如图所示 系统会监听文本输入,需要注意的第一点是输入法处于联想输入还未确定提交的时候 ...
- Spring概述
layout: post title: Spring概述 tags: [Java,Spring,IOC,AOP] --- Spring是一个开源的轻量级Java SE(Java 标准版本)/Java ...
- iOS之UI--涂鸦画板实例 （有待更新）
首先是搭建框架 其他的略过,直接展示效果: 然后接下来上传搭建好两个控制器框架的源码百度云下载链接: http://pan.baidu.com/s/1skjpDox 密码: ardx ,工程里面还有我 ...
- javascript 依次输入自动定焦框
<html> <head> <script type="text/javascript"> function moveNext(object,i ...
- tomcat下部署润乾报表
因为项目需要,需要在项目中配置润乾报表,之前一直是用的jboss服务器,此处调整为tomcat时出错,然后各种找错,找答案,最后终于好了,然后总结一下. 首先在apache-tomcat-6.0.43 ...
- su su -
http://www.ha97.com/4001.html su命令和su -命令最大的本质区别就是:前者只是切换了root身份,但Shell环境仍然是普通用户的Shell:而后者连用户和Shell环 ...
- JavaScript Patterns 4.5 Immediate Functions
The immediate function pattern is a syntax that enables you to execute a function as soon as it is d ...
- 问题解决——SolidWorks 已停止工作 （Windows7 + SolidWorks 2010 SP0.0）
给同事的SolidWorks解决问题时偶然间发现的. -------------------------------------------------------------- 本文原创,转载请注明 ...
- 读书笔记——Windows环境下32位汇编语言程序设计（13）关于EXCEPTION_DEBUG_INFO结构体
在动手自己尝试编写书上第13章的例子Patch3时,遇到了一个结构体EXCEPTION_DEBUG_INFO. 这个结构体在MASM的windows.inc中的定义和MSDN中的定义不一样. (我使用 ...
- 【原】基于 HAproxy 1.6.3 Keeplived 在 Centos 7 中实现mysql mariadb galera cluster 集群分发读写 —— 上篇
前言 有一段时间没有写blogs,乘着周末开始整理下haproxy + keeplived 实现 mysql mariadb galera cluster 集群访问环境的搭建工作. 本文集中讲hapr ...