JS瀑布流布局模式(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://www.cnblogs.com/zourong/p/3934738.html

JS瀑布流布局模式(2)的更多相关文章

JS瀑布流布局模式(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
JS瀑布流布局
好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...
JS案例之6——瀑布流布局(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
js网页瀑布流布局
瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...
瀑布流布局js
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
也来谈谈wap端瀑布流布局
Definition 瀑布流布局,在视觉上表现为参差不齐的多栏布局,随着页面滚动条向下滚动,新数据不断被加载进来. 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内 ...
Bootstrap实战 - 瀑布流布局
讲 Bootstrap 基础的教程网上已经很多了,实际上 Bootstrap 中文网(bootcss.com)里的文档已经写的很详细了,但实战的案例却不多.这里用一些当前流行的网页布局为导向,使用 B ...

随机推荐

dos 实用命令收集
隐藏文件夹: H:\>attrib gho +h +s +r 解决win2012服务器上网慢:netsh int tcp set global ecn=disable
DOS攻击和DDOS攻击有啥区别啊
DDOS是DOS攻击中的一种方法. DoS:是Denial of Service的简称,即拒绝服务,不是DOS操作系统,造成DoS的攻击行为被称为DoS攻击,其目的是使计算机或网络无法提供正常的服务. ...
利用DescriptionAttribute定义枚举值的描述信息 z
System.ComponentModel命名空间下有个名为DescriptionAttribute的类用于指定属性或事件的说明,我所调用的枚举值描述信息就是DescriptionAttribute类 ...
[C#搜片神器] 之P2P中DHT网络爬虫原理
继续接着上一篇写:使用C#实现DHT磁力搜索的BT种子后端管理程序+数据库设计(开源)[搜片神器] 昨天由于开源的时候没有注意运行环境,直接没有考虑下载BT种子文件时生成子文件夹,可能导致有的朋友运行 ...
bjfu1299 stl使用
题目超简单,我写解题报告是因为我的代码用了些STL,使代码很简洁. * * Author : ben */ #include <cstdio> #include <cstdlib&g ...
提高CSS开发能力的技巧集
1. 使用:not()给导航条添加间隔线我们通常使用如下代码给导航条增加间隔线 /* add border */ .nav li { border-right: 1px solid #666; } ...
Python 多线程学习（转）
转自:http://www.cnblogs.com/slider/archive/2012/06/20/2556256.html 引言对于 Python 来说,并不缺少并发选项,其标准库中包括了对线 ...
VHDL之Port map and open
编SPI的master控制器,使用公司基本的元件,有些端口用不着,恰巧好二哥(不知年龄的数字组组长,本名Holger)来了,于是请教之,告曰open关键词.后来深感自己VHDL水平太水,下了一本电子书 ...
return View()
postconf 命令常用参数
postfix的main.cf配置文件一般不直接编辑,而多使用postconf命令来配置‘ postconf -d:查看默认配置: postconf -n:查看当前配置(即当前生效的配置): post ...

JS瀑布流布局模式(2)

JS瀑布流布局模式(2)的更多相关文章

随机推荐

热门专题