这个例子与上一篇类似，唯一的区别是排序的方式有差别。上一篇是在高度最小的列里插入内容，这个案例是按顺序放置内容。

两种方法各有优缺点。第一种需要在图片内容加载完成的情况下有效。这个例子不需要在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)的更多相关文章

  1. JS案例之6——瀑布流布局(1)

    在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...

  2. JS原生方法实现瀑布流布局

    html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...

  3. JS 瀑布流布局

    瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  4. 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  5. JS瀑布流布局模式(1)

    在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...

  6. js网页瀑布流布局

    瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...

  7. JS瀑布流布局

    好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...

  8. 瀑布流布局js

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  9. Bootstrap实战 - 瀑布流布局

    讲 Bootstrap 基础的教程网上已经很多了,实际上 Bootstrap 中文网(bootcss.com)里的文档已经写的很详细了,但实战的案例却不多.这里用一些当前流行的网页布局为导向,使用 B ...

随机推荐

  1. [android] 手机卫士自定义对话框布局

    手机防盗页面部分 点击手机防盗,进行判断,如果没有设置密码,显示一个设置密码的对话框,如果已经设置密码了,弹出输入密码对话框 密码保存在SharedPreferences中,数据取出进行判断 自定义一 ...

  2. 通过注册的URL Scheme向目标APP传递参数

    通过注册的URL Scheme向目标APP传递参数 通过URL Scheme启动APP很简单就可以做到,但有时候我们想在启动APP的时候传递一些参数,这个时候我们就可以通过URL Scheme自定义U ...

  3. Jmeter调试工具---Debug Sampler

    一.Debug Sampler介绍: 使用Jmeter开发脚本时,难免需要调试,这时可以使用Jmeter的Debug Sampler,它有三个选项:JMeter properties,JMeter v ...

  4. [Tomcat]如何在同一台机部署多个tomcat服务

    背景:往往不知情的同学在同一台机器上部署多个tomcat会发现第二个tomcat启动会报错.而有些同学会想到可能是端口重复,然而,在server.xml改了端口还是发现不行.其实要想实现同一台机器部署 ...

  5. [AapacheBench工具]web性能压力测试工具的应用与实践

    背景:网站性能压力测试是性能调优过程中必不可少的一环.服务器负载太大而影响程序效率是很常见的事情,一个网站到底能够承受多大的用户访问量经常是我们最关心的问题.因此,只有让服务器处在高压情况下才能真正体 ...

  6. PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  7. Cocos2d-x分类

    Cocos2d-x win7 + vs2010 配置图文详解(亲测) Cocos2d-x建工程时避免copy文件夹和库

  8. Apache CXF自定义拦截器

    为什么设计拦截器?1.为了在webservice请求过程中,能动态操作请求和响应数据,CXF设计了拦截器 拦截器分类: 1.按所处的位置分:服务器端拦截器,客户端拦截器. 2.按消息的方向分:入拦截器 ...

  9. 烂泥： KVM虚拟机Linux系统增加硬盘

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. Linux虚拟机在使用过程中,硬盘空间不够使用.由于前期没有做LVM,所以只能手动添加新的硬盘. 给虚拟机添加硬盘有两种方法: 1.通过virsh at ...

  10. Linux LDAP Server--->Clients配置

    Linux Ldap Configuration LDAP Server Base Software & SysTem Info SysTem Info 系统版本:centos 6.4 LDA ...