在实际的项目中，偶尔会用到一种布局——瀑布流布局。瀑布流布局的特点是，在多列布局时，可以保证内容区块在水平方向上不产生大的空隙，类似瀑布的效果。简单的说，在垂直列表里，内容区块是一个挨着一个的。当内容较多且不固定时，就依赖于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)的更多相关文章

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

    这个例子与上一篇类似,唯一的区别是排序的方式有差别.上一篇是在高度最小的列里插入内容,这个案例是按顺序放置内容. 两种方法各有优缺点.第一种需要在图片内容加载完成的情况下有效.这个例子不需要在wind ...

  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. 深入理解Linux字符设备驱动

    文章从上层应用访问字符设备驱动开始,一步步地深入分析Linux字符设备的软件层次.组成框架和交互.如何编写驱动.设备文件的创建和mdev原理,对Linux字符设备驱动有全面的讲解.本文整合之前发表的& ...

  2. iOS开发中常用方法调用顺序

  3. FQ技术

    什么是技术,就是翻_墙技术啦~ 关于GoogleFQ的网页,点击图片就能进入该网页浏览相关的FQ的设置 hosts所在文件夹: Windows 系统hosts位于 C:\Windows\System3 ...

  4. Monyer's Game 11~15关过关方法

    到目前为止,玩这个小游戏并过关的人数已经达到了81人,首先Monyer要感谢各位的捧场与支持.继续上次的<Monyer's Game 6~10关过关方法>,我们来看剩下几关的过关方法. 但 ...

  5. jQuery DataTables 行获取

    datatables的官方例子中似乎没有提到表格双击和获取相应行号的功能; 经过探索可以按照以下方式实现:  $("#example tbody tr").dblclick(fun ...

  6. android SQLiteOpenHelper使用示例

    我们大家都知道Android平台提供给我们一个数据库辅助类来创建或打开数据库,这个辅助类继承自SQLiteOpenHelper类,在该类的 构造器中,调用Context中的方法创建并打开一个指定名称的 ...

  7. JavaScript中判断为整数的多种方式

    之前记录过JavaScript中判断为数字类型的多种方式,这篇看看如何判断为整数类型(Integer). JavaScript中不区分整数和浮点数,所有数字内部都采用64位浮点格式表示,和Java的d ...

  8. hdu 3987 Harry Potter and the Forbidden Forest 求割边最少的最小割

    view code//hdu 3987 #include <iostream> #include <cstdio> #include <algorithm> #in ...

  9. Legends-ggplot2图例的一些操作

    移除图例 require(ggplot2) b = qplot(Sepal.Length,Petal.Length,data=iris,geom="point",colour = ...

  10. web工程 所需是jar包总结

    commons-beanutils-1.8.3.jar : BeanUtils主要提供了对于JavaBean进行各种操作,需要Commons -Collections包和Commons -loggin ...