JS瀑布流布局模式(1)

时间：2022-11-17 19:08:22

在实际的项目中，偶尔会用到一种布局——瀑布流布局。瀑布流布局的特点是，在多列布局时，可以保证内容区块在水平方向上不产生大的空隙，类似瀑布的效果。简单的说，在垂直列表里，内容区块是一个挨着一个的。当内容较多且不固定时，就依赖于html结构的顺序，非常受限制。这里给了一个简单的例子，只要传入列表的数量和宽度，就可以动态的将数据放到对应的列里。

原理

1.定义两个容器，一个是存放内容，一个是要展示的列表。

2.将每列的offsetHeight存入一个数组里，比较得出最小的那一列，然后把数据放到最小的列里。判断当存放内容的容器为空时，就说明里面的数据已经全部放到对应的列里了。

注意：这个函数需要在window.onload之后执行，不然每个内容区块的高度读不出来，会导致每一列的offsetHeight不准确。

JS瀑布流布局模式(1)

源代码：

<!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();//使用初始化参数 waterFall.init({num:4,width:100});

</script>

</body>

</html>

出处：http://www.cnblogs.com/zourong/p/3934661.html

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

  1. JS瀑布流布局模式&lpar;2&rpar;

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

  2. JS 瀑布流布局

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

  3. JS瀑布流布局

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

  4. JS案例之6——瀑布流布局&lpar;1&rpar;

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

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

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

  6. js网页瀑布流布局

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

  7. 瀑布流布局js

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

  8. 也来谈谈wap端瀑布流布局

    Definition 瀑布流布局,在视觉上表现为参差不齐的多栏布局,随着页面滚动条向下滚动,新数据不断被加载进来. 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内 ...

  9. Bootstrap实战 - 瀑布流布局

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

随机推荐

  1. jstack&plus;top定位性能问题

    定位性能问题,尤其是cpu使用率过高时,经常需要查找cpu消耗较高的线程,然后查看其堆栈,从而进入代码定位问题. 该场景下, jstack+top是一种非常经典的方式. jstack+top:   1 ...

  2. Python &plus; PIL 处理支付宝AR红包

    思路比较简单:1.对图片进行锐化处理:2.设(r_h, g_h, b_h)为支付宝遮罩黑条的RGB值,以此为中心,查找半径为Diff_radius的范围内所有的色值: 3.对每一行符合步骤2的像素点个 ...

  3. WordPress 常用数据库SQL查询语句大全

    在使用WordPress的过程中,我们少不了要对数据库进行修改操作,比如,更换域名.修改附件目录.批量修改文章内容等等.这个时候,使用SQL查询语句可以大大简化我们的工作量. 关于如何操作SQL查询语 ...

  4. Codeforces Gym 100463B Music Mess Hash 逻辑题

    Music Mess Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100463/attachments ...

  5. MySQL Handler变量解析

      http://blog.itpub.net/29254281/viewspace-1159014/ To see the effect of a query do the following st ...

  6. 精致的外观Request

    为什么要说Request精致的外观?请注意,我们这里所说的并不总是理解含义的外观门面,事实上,它使用的立面设计图案.使用的主要考虑数据安全的门面.它涉及到一个更大的系统系统的多个子系统之间的互动沟通. ...

  7. tar &lpar;child&rpar;&colon; jdk-7u71-linux-x64&period;tar&period;gz：无法 open&colon; 没有那个文件或目录

    1 错误描述 youhaidong@youhaidong:~$ sudo mkdir /usr/lib/jvm [sudo] password for youhaidong: youhaidong@y ...

  8. 07&lowbar;数据库创建，添加c3p0操作所需的jar包，编写c3p0-config&period;xml文件，编写User&period;java&comma;编写jdbcUtils&period;java实现操作数据库的模板工具类，UserDao编写，Dao

     1  创建day14数据库,创建user.sql表: A 创建数据库 day14 B 创建数据表 users create table users ( id int primary keyaut ...

  9. ACM-ICPC 2018 焦作赛区网络预赛 K Transport Ship &lpar;多重背包&rpar;

    https://nanti.jisuanke.com/t/31720 题意 t组样例,n种船只,q个询问,接下来n行给你每种船只的信息:v[i]表示这个船只的载重,c[i]表示这种船只有2^(c[i] ...

  10. 自动化测试系列：如何实现Selenium自动化读取H5手机缓存

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6890675.html 前言: 由于Se ...

相关文章