ＩＳＳＮ １００９－３０４４ Ｅ—ｍａｉｌ：ｘｓｊｌ＠ｄｎｚｓ．ｎｅｔ．ｃｎ ｈｔｔｐ：／／ｗｗｗ．ｄｎｚｓ．ｎｅｔ．ｃｎ Ｔｅｌ：＋８６—５５１－６５６９０９６３ ６５６９０９６４ ＣｏｍｐｕｔｅｒＫｎｏｗｌｅ内ｅａｎｄＴｅｃｈｎｏｌｏｇｙ电脑知识与技术 Ｖｏ１．１２，Ｎｏ．２５，Ｓｅｐｔｅｍｂｅｒ ２０１６ 瀑布流布局的多种实现方式及其比较研究 董春侠，司占军，张海月 （天津科技大学包装与印刷工程学院，天津３００２２２） 摘要：瀑布流布局突破了传统网页的布局方式，不仅设计独特，更能带来良好的用户体验，使得展示类网站在视觉和功效 上得到统一。该文从瀑布流布局的核心点出发，首先介绍瀑布流布局的原理，然后利用ＪａｖａＳｃｒｉｐｔ、ｊＱｕｅｒｙ、ＣＳＳ３三种方法 实现瀑布流布局效果，并介绍其用到的相关知识点，最后对三种实现方式进行比较，分析其各自性能的优缺点。 关键词：瀑布流布局；ＪａｖａＳｃｒｉｐｔ；ｊＱｕｅｒｙ；ＣＳＳ３ 中图分类号：ＴＰ３１１ 文献标识码：Ａ 章编号：１００９．３０４４（２０１６）２５－００５３．０３ ＡＶａｒｉｅｔｙ ｏｆＩｍｐｌｅｍｅｎｔａｔｉｏｎＭｅｔｈｏｄｓ ｏｆＷａｔｅｒｆａｌｌＦｌｏｗＬａｙｏｕｔａｎｄＴｈｅｋＣｏｍｐａｒｉｓｏｎ ＤＯＮＧ Ｃｈｕｎ－ｘｉａ，ＳＩ Ｚｈａｎ－ｊｕｎ，ＺＨＡＮＧ Ｈａｉ・ｙｕｅ （Ｓｃｈｏｏｌ ｏｆＰａｃｋａｇｉｎｇ ａｎｄ Ｐｒｉｎｔｉｎｇ Ｗｏｒｋｓ，Ｔｉｎｊａｉｎ Ｕｎｉｖｅｒｓｉｙ ｔｏｆ Ｓｃｉｅｎｃｅ ａｎｄ Ｔｅｃｈｎｏｌｏｇｙ，Ｔｉａｎｊｉｎ ３００２２２，Ｃｈｉｎａ） Ａｂｓｔｒａｃｔ：Ｗａｔｅｒｆａｌｌ ｆｌｏｗ ｌａｙｏｕｔ ｂｒｏｋｅ ｔｈｒｏｕｇｈ ｔｈｅ ｔｒａｄｉｔｉｏｎａｌ ｗｅｂ ｐａｇｅ ｌａｙｏｕｔ．Ｉｔ ｎｏｔ ｏｎｌｙ ｈａｓ ｕｎｉｑｕｅ ｄｅｓｉｇｎ ｓｔｙｌｅ，ｂｕｔ ａｌｓｏ ｃａｒｌ ｂｒｉｎｇ ａ ｇｏｏｄ ｕｓｅｒ ｅｘｐｅｒｉｅｎｃｅ，ＳＯ ｔｈａｔ ｔｈｅ ｄｉｓｐｌａｙ ｗｅｂｓｉｔｅｓ ｃａｎ ｍａｋｅ ａ ａｃｃｏｒｄａｎｃｅ ｉｎ ｔｈｅ ｖｉｓｕａｌ ａｎｄ ｅｆｆｅｃｔｉｖｅｎｅｓｓ．Ｔｈｉｓ ｐａｐｅｒ ｓｔａｒｔｓ ｆｒｏｍ ｔｈｅ ｃｏｒｅ ｐｏｉｎｔ ｏｆ ｔｈｅ ｗａｔｅｒｆａｌｌ ｆｌｏｗ ｌａｙｏｕｔ．Ｆｉｒｓｔ，ｔｈｅ ｐｒｉｎｃｉｐｌｅ ｏｆ ｗａｔｅｒｆａｌｌ ｆｌｏｗ ｌａｙｏｕｔ ｗａｓ ｉｎｔｒｏｄｕｃｅｄ，Ｔｈｅｎ ｕｓｅ ｔｈｒｅｅ ｍｅｈｏｄｓｔ ａｓ ＪａｖａＳｃｒｉｐｔ，ｊＱｕｅｒｙ，ｃｓｓ３ ｔｏ ａｃｈｉｅｖｅ ｈｅｔ ｅｆｆｅｃｔ ｏｆ ｈｔｅ ｗａｔｅｆａｒｌｌ ｌｆｏｗ ｌａｙｏｕｔ，ａｎｄ ｉｎｔｒｏｄｕｃｅ ｔｈｅ ｒｅｌｅｖａｎｔ ｋｎｏｗｌｅｄｇｅ．Ｆｉ— ｎａｌｌｙ，ｔｈｅ ａｄｖａｎｔａｇｅｓ ａｎｄ ｄｉｓａｄｖａｎｔａｇｅｓ ｏｆ ｔｈｅ ｔｈｒｅｅ ｍｅｔｈｏｄｓ ｗｅｒｅ ｃｏｍｐａｒｅｄ ａｎａｌｙｚｅｄ． Ｋｅｙ ｗｏｒｄｓ：ｗａｔｅｒｆａｌｌ ｌｆｏｗ ｌａｙｏｕｔ；ｊａｖａｓｃｒｉｐｔ；ｊｑｕｅｒｙ；ｃｓｓ３ １背景 在“读图时代”的背景下，人们在获取信息时希望通过一种 轻松愉快的方式ｎ ，在面对大量图片汹涌而来时，传统的表格布 局、ＤＩＶ＋ＣＳＳ布局已经不能满足网页的布局要求，新型的瀑布 流布局的出现改变了这一现状，成为目前展示类网站中常用的 一据，即下拉滚动时，触发加载数据操作，并把数据添加到目标容 器中 。 ２．１数据块排列（对容器中已有元素ｎｎｍ个进行排列）实现思路 如下 １）固定数据块的宽度； 种布局方式。最早采用此布局的网站是Ｐｉｎｔｅｒｅｓｔ，浏览者通 的浏览过程，符合人们在移动互联网时代快速浏览的习惯，因 ２）初始化，对容器中已有数据块元素进行计算，获取可视 区域的宽度ｃｌｉｅｎｔＷ和数据块的宽度ｏＢｏｘＷ，计算页面中的列 数ｃｏｌｓ（ｃｌｉｅｎｔＷ／ｏＢｏｘＷ）； ３）设置容器的宽度（ｃｏｌｓ＊ｏＢｏｘＷ）和居中样式； 过快速扫视屏幕就可以在短时间内获得大量的信息，大大简化 此备受追捧 。懒加载模式是瀑布流布局的另外一大亮点，用 户不需要通过点击鼠标进行翻页，而是通过滑动鼠标滚轮来获 取更多信息 。 瀑布流布局的技术实现主要是应用ＪａｖａＳｃｒｉｐｔ技术或 ｊＱｕｅｒｙ等Ｊｓ框架，实现方法的原理基本都相同 。本文采用多 种方式实现瀑布流布局，并对它们进行比较，分析其各自性能 的优缺点。 ４）定义一个数组ｈａｒｔ用来存放每列的高度； ５）获取ｈＡｉｒ中最小的值ｍｉｎＨ及其所在的索引ｉｎｄｅｘ； ６）循环遍历容器中的所有数据块，将其放在ｍｉｎＨ所在列 的下面，根据ｉｎｄｅｘ，确定该数据块的ｌｅｆｔ，ｔｏｐ值，ｌｅｆｔ为所在列的 序号ｉｎｄｅｘ乘以列宽ｃｏｌｓ，ｔｏｐ为所在列的当前高度； ２瀑布流布局的实现原理 瀑布流是一种网站页面布局的形象化描述，其特点是采用 定宽而不定高的设计，实现原理主要包含两个部分，一个是对 ７）更新所在列的当前高度，值为当前高度加上这个数据块 元素的高度。 ２．２动态加载数据 现有数据块进行排列计算各自所在的位置；二是动态加载数 １）绑定滚动事件，并确定预加载线高度值，即滚动到哪个 高度后，需要去加载数据，这里以容器中最后一个数据块的高 收稿日期：２０１６—０７—２８ 作者简介：董春侠（１９９２一），女，安徽宿州人，学生，天津科技大学包装与印刷工程学院硕士在读，主要研究方向为数字出版，ｗｅｂ前 端；司占军（１９７１一），男，河北张家口人，天津科技大学包装与印刷工程学院教授、硕士生导师，硕士，主要研究方向为数 字出版技术，虚拟现实；张海月（１９９２一），女，天津人，学生，天津科技大学包装与印刷工程学院硕士在读，主要研究方向 为数字出版，虚拟现实。 本栏目责任编辑：谢媛媛 软件设计开发 ５３ ＣｏｍｐｕｔｅｒＫｎｏｗｌｅｄｇｅ ａｎｄ Ｔｅｃｈｎｏｌｏｇｙ电脑知识‘ 技术 第１２卷第２５期（２０１６年９月） ３．２效果实现 度（１ａｓｔＢｏｘＨ）与滚动距离（ｓｃｒｏ１］Ｔｏｐ）￣ｌｌ页面高度（ｈｅｉｇｈｔ）之和进 行比较，若ｌａｓｔＢｏｘＨ＜ｓｃｒｏｌｌ Ｆｏｐ＋ｈｅｉｇｈｔ，进行加载数据，若ｌａｓｔ— ＢｏｘＨ＞ｓｃｒｏｌｌＴｏｐ＋ｈｅｉｇｈｔ不进行加载； ３．２．１ ＪａｖａＳｃｒｉｐｔ实现瀑布流布局 ２）将新加载的数据渲染到页面中。 首先确定页面中数据块的列数，然后将第一行数据块的高 ［ ／ ７ Ｉ计算判数ｏｏＩ ３（窗口竟 列竟）Ｉ 度存放在数组中，对剩下的数据块进行遍历．将其定位在每列 高度最小的那一列。核心代码如下： ｆｕｎｃｔｉｏｎ ｗａｔｅｒｆａｌｌ（ｐａｒｅｎｔ，ｂｏｘ）｛ ／／：ｔｅ￣ｍａｉｎ下面所有ｃｌａｓｓ为ｂｏｘ的元素取ｊＩＪ来 ｖａｒ ｏＰａｎｅｎｔ＝ｄｏｃｕｍｅｎｔ．ｇｅ【ＥｌｅｍｅｎｆＢｙＩｄ（”ｍａｉｎ”）； ｖａｒ ｏＢ０ｘｓ＝ｇｅｔＢｙＣｌａｓｓ（ｏＰａｎｅｎｔ，ｂｏｘ）； １ ｊ毫盒子的高度逛加在致蛆ｈ＾ｒ ｒ中Ｉ ：数 肼算整个页面的列数（页面宽度／ｂｏｘ宽度） ｖａｒ ｏＢｏｘＷ＝ｏＢｏｘｓ［０］．ｏｆｆｓｅｔＷｉｄｔｈ； ｖａｒ ｃｏｌｓ＝Ｍａｔｈ．ｌｆｏｏｒ（ｄｏｃｕｍｅｎｔ．ｄｏｅｕｍｅｎｔＥｌｅｍｅｎｔ．ｃｌｉｅｎｔ・ Ｗｉｄｔｈ／ｏＢｏｘＷ）； ；据 排 列 Ｅ 块 厂 ｌ求出ｈａｔ ｒ中量 １、值及其索引ｌ＋———一ｌ辖下一个娃据块定位在高度量小的判ｌ ： ： ０ ａｕｔｏ ； ／／设置ｍａｉｎ的宽度和居中显示 ｏＰａｎｅｎｔ．ｓｔｙｌｅ．（・ｓｓＴｅｘｔ＝ ｗｉｄｔｌａ： ＋ｏＢｏｘＷ ｃｏｌｓ＋ ｐｘ；ｍａｒｇｉｎ： 匪 ｖａｒ ｈＡｒｒ＝［］；／／存放每一列高度的数组 ｆｏｒ（ｖａｒ ｉ＝０；ｉ＜ｏＢｏｘｓ．１ｅｎｇｔｈ；ｉ＋＋）｛ Ｉ＜ 粤 羞列 加 数 面 ’薨 据 １ｉｆ（ｉ＜ｃｏｌｓ）｛ ｈＡｌＩｒ．ｐｕｓｈ（ｏＢｏｘｓ［ｉ］．ｏｆｆｓｅｔＨｅｉｇｈｔ）； ｝ｅｌｓｅ｛ ｖａｒ ｍｉｎＨ＝Ｍａｔｈ．ａｒｉｎ．ａｐｐｌｙ（ｎｕｌｌ，ｈＡｒｒ）； ｖａｒ ｉｎｄｅｘ＝ｇｅｔＭｉｎｌｎｄｅｘ（ｈＡｒｒ，ｍｉｎＨ）； 图１瀑布流算法流程图 ｏＢｏｘｓ［ｉ］．ｓｔｙｌｅ．ｐｏｓｉｌｉ０ｎ＝，ａｂｓ（）ｌｕｔｅ ； ｏＢｏｘｓ［ｉ］．ｓｔｙｌｅ．ｔｏｐ＝ｍｉｎＨ＋。’ｐｘ”： ｏＢｏｘｓ［ｉ］．ｓｔｙｌｅ．１ｅｆｌ＝ｏＢｏｘＷ ｉｎｄｅｘ＋ ｐｘ ： ｈＡｒｒｌｉｎｄｅｘ］＋＝ｏＢｏｘｓ［ｉｌ．ｏｆｆｓｅｔＨｅｉｇｈｔ， １ ｝ Ｊ ３实现方式 瀑布流布局可以用三种方式进行实现：原生ＪａｖａＳｅｒｉｐｔ、 ｊＱｕｅｒｙ和ＣＳＳ３，然后利用Ｊａｓｏｎ数据模拟后台数据库来不断提 供新的数据，再应用ＪａｖａＳｃｒｉｐｔ动态加载数据块，并渲染到页面 中。 ３．１页面结构布局 最终实现效果冈曳Ｉ】下罔２： 瀑布流布局以是以数据块来显示数据的，各个数据块的样 式基本相同，不同之处在于数据块内部的文字和图片，因此页 面结构的布局代码如下： ＜ｄＩ、ｒ ｉｄ＝”ｍａｉｎ”＞ ＜ｄｉｖ ｃｌａｓｓ＝”ｂｏｘ’’＞ ＜ｄｉｖ ｃｌａｓｓ＝”ｉｍｇ”＞ ＜ｉｍｇ ＳＦＣ＝”ｉｍｇ／１．ＪＰｇ”ａｈ＝”风景１”＞ ＜／ｄｉｖ＞ ＜／ｄｉｖ＞ ＜ｄｉｖ（，ｌａｓｓ＝”ｂｏｘ”＞ ＜ｄｉｖ ｃｌａｓｓ＝”ｉｍｇ’ ＞ ＜ｉｍｇ ｓｒｃ＝”ｉｍｇ／２．ＪＰｇ”ａｈ＝”风景２”＞ ＜／ｄｉｖ＞ ＜，（ｊｉｖ＞ 图２ ＪａｖａＳｃｒｉｐｔ实现瀑布流的效果图 ＜／ｄｉｖ＞ ３．２．２ ｊＱｕｅｒｙ实现瀑布流布局 数据块的单元是ｃｌａｓｓ为ｂｏｘ的ｄｉｖ盒子。在设置样式时， ｃｌａｓｓ为ｍａｉｎ的盒子的ｐｏｓｉｔｉｍ１应设置为ｒｅｌａｔｉｖｅ。方便后来对数 ｊＱｕｅｒｙ实现瀑布流的原理与ＪａｖａＳｃｒｉｐｔ基本相同，借助 ｊＱｕｅｒｙ提供的强大选择器和方法，可以大大减少原生ＪａｖａＳｃｒｉｐｔ 的代码书写，快速实现瀑布流布局。ｊＱｕｅｒｙ实现瀑布流的代码 如下 本栏目责任编辑：谢媛嫒 据块进行绝对定位 瀑布流布局的核心是等宽不等高，因此还 要给（！ｌａｓｓ为ｉｍｇ的ｃＩｉｖ盒子同定宽度。 软件设计开发 第１２卷第２５期（２０１６年９月） ｍｎｅｔｉ删Ｗａｔｅｒｆａｌｌ０ｌ ∥将ｍｄｉｎ下面所有 矗始为ｂ妇的元素取出来 々ｄｔ ｂｏｘｓ＝￥（ ＃ｌ ｄｉ“ ｄｉ ＇； ａｒ￣＝ｂｏｘｓ．ｅｑ（ｏ）．ｏｕｔｅｒＷｉｄｔｈ０； ，卅算整个页面的列数（贞面宽度／ｂｏｘ宽度） ｖａｔ ｃｏｌｓ＝Ｍ￣ｉｔｈ ㈨ｎｄｏ’ｒ）；ｗｉｄｔｈＯ／ｗ）； ＣｏｍｐｕｔｅｒＫｎｏｗ￣ｅｄｇｅａｎｄＴｅｃｈｎｏ／ｏｇｙ电脑知识与技术 ￥．ｅａｃｈ（ｄａｔａＩｎｔ．ｄａｔａ，ｆｕｎｃｔｉｏｎ（ｉｎｄｅｘ，ｖａｌｕｅ）｛ ｖａｔ ｏＢｏｘ＝￥（ ＜ｄｉｖ＞３．ａｄｄＣｌａｓｓ（＇ｂｏｘ９．ａｐ— ｐｅｎｄＴｏ（￥（”＃ｍａｉｎ”））； ｖａｔ ｏＩｍｇ＝￥（ ＜ｄｉｖ＞，）．ａｄｄＣｌａｓｓ（ ｉｍｇ＇）．印一 ｐｅｎｄＴｏ（￥（ｏＢｏｘ））； ｖａｒ ｉｍｇ＝￥（ ＜ｉｍｇ＞３．ａｔｔｒ（＇ｓｒｃ＇，￣ｍｇ／ ＋￥（ｖａＩ— ，艘筐ｍ ｉｎ的宽度利居中显示 ￥（ ｝｝ｔｔＩａｉｎ，）．ｃｓｓ（ｔ￣ｗｉｄｔＢ ＊ §｛’魏且自 ｎ ： ａｕｔｏ ））； ｖｄ士Ｉ１ＡＨ＝ｆ１ｊ膊放每一列高度的数组 ｂ撤§．ｅｄｃｈ ｎｅｔｉ￣ｎ（ｉａｄｅ，，ｖａｌｕｅ）ｆ 训打ｈ＝ｂｏ ｓ．ｅｑ（ｔｎｄｅｘ）。ｏｔｌｌｅｒＨｅｉｇｈｔ０； ｉｆ（ＪｎｄｅｘＣｅｏｌ￣）ｌ ｈＡｎｆｉｎｄｅｘｌ＇－ｈ； ｝ 鲍ｆ ｖａｔ ｍｉｎＨ￣Ｍａｔｈ．ｍｉｎ．ａｐｐｌｙ（ｎｕｌｌ，ｈＡｒｒ）； ｉ，ａｆ ｍｉｎＨＩＭ￣＝￥．ｉｎＡｒｒａｙ（ｍｉｎＨ，ｈＡｒｒ．； 嚣（划ｕｅ）；ｃｓｓ（１ ，ｐ０ｓｉｔｉｏｎ ｂｓｏｌｕｔｅ ， ＋ｔｏｐ ＇ｍｉｎＨ＋ ｐｘ ， ＂ｌｅｆｔ ：ｗ ｍｉｎＨＩｎｄｅｘ＋＂ｐｘ １） ｈＡｒｄｍＪｎＨＩｎｄｅｘＪ＋￣ｂｏｘｇ．ｅｑ（ｉｎｄｅｘ）．ｏｕｔｅｒＨｅｉｇｈｔ Ｏ； ｝ ｝） ｝ ３．２．３ ＣＳＳ３实现瀑布流布局 该方法主要用到了ＣＳＳ３的ｃｏｌｕｍｎｓ属性。ｃｏｌｕｍｎ—ｃｏｕｎｔ用 来设置列数，ｃｏｌｕｍｎ—ｗｉｄｔｈ设置每列宽度。当只设置ｃｏｌｕｍｎ— ｗｉｄｔｈ时，浏览器会根据窗口大小和每列的宽度来计算列数；当 只设置ｃｏｌｕｍｎ—ｃｏｕｎｔ时，浏览器会平均计算每列宽度；若两者 都设置时，浏览器会根据ｃｏｌｕｍｎ—ｃｏｕｎｔ计算宽度和ｃｏｌｕｍｎ— ｗｉｄｔｈ设置的宽度进行比较，取较大的值作为每列宽度，当窗口 缩小时，ｃｏｌｕｍｎ—ｗｉｄｔｈ的值为每列的最小宽度。这里我们只给 ｃｌａｓｓ为ｍａｉｎ的盒子设置ｃｏｌｕｍｎ—ｗｉｄｔｈ属性。 ３．３动态加载图片 完成前面的代码书写后我们只是实现容器中已有的数据 块的排列，而瀑布流一个特点是滚动加载新的内容，因此需要 给ｗｉｎｄｏｗ绑定ｓｃｒｏｌｌ事件（ＪａｖａＳｃｒｉｐｔ中用ｗｉｎｄｏｗ．ｏｎｓｃｒｏｌｌ０）来 监听滚动条的变化，然后用Ｊａｓｏｎ数据模拟后台更新数据块，最 后将新的数据块渲染到页面中。利用ｊＱｕｅｒｙ实现动态加载图 片的代码如下： ｖａｒ ｄａｔａｌｎｔ＝｛”ｄａｔａ”：【｛ ｓｒｃ ： １．ＪＰｇ，１，｛ ｓｒｃ ： ２．ｊｐｇ，】’｛ ｓｒｃ ： ３．ＪＰｇ，Ｊ， ｛ ｓｒｃ ： ．ＪＰｇ，）］） ￥（ｗｉｎｄｏｗ）．ｏｎ（＇ｓｃｒｏｌｌ ，ｆｕｎｃｔｉｏｎ０｛ ｉｆ（ｃｈｅｃｋＳｃｒｏｌｌＳｌｉｄｅ）｛ 辱数据块渲染到页面当中 本栏目责任编辑：谢媛媛 ｕｅ）．ａｔｔｒ（ ｓｒｃ，））．ａｐｐｅｎｄＴｏ（￥（ｏｌｍｇ））； ）） ｗａｔｅｒｆａｌｌ０； ｌ ｝） ４瀑布流布局实现方式比较 ＪａｖａＳｃｒｉｐｔ、ｊＱｕｅｒｙ和ＣＳＳ３三种方式都可以实现瀑布流效 果，但ＪａｖａＳｃｒｉｐｔ和ｊＱｕｅｒｙ两种方法实现思路基本一致，因此将 其归为ＪａｖａＳｃｒｉｐｔ类，下面对ＪＳ和ＣＳＳ３两种方法进行比较，分 析其在性能和用户体验上的优缺点。 １）性能：ＪａｖａＳｃｒｉｐｔ实现的瀑布流中，需要通过计算得到列 数，即浏览器窗口的宽度／图片宽度，并且图片的定位是根据每 一列的高度来计算接下来图片的位置；而ＣＳＳ３实现的瀑布流 中，浏览器会自动计算显示的列数，只需要设置列宽即可，因此 使用ＣＳＳ３方法要比使用ＪａｖａＳｃｒｉｐｔ或ｊＱｕｅｒｙ性能高很多。 ２）用户体验：ＪａｖａＳｃｒｉｐｔ实现的瀑布流中，图片进行横向排 列，每张图片的位置是通过计算得到的，因此比较规范；ＣＳＳ３ 实现的瀑布流中，列宽会随着浏览器矿口的大小进行改变，并 且图片的排列顺序是按照垂直排列，这打乱了图片在页面中显 示顺序，用户体验不好，此外当滚动滚动条加载图片时，依然需 要依靠ＪａｖａＳｃｒｉｐｔ来实现。 ５结束语 瀑布流布局巧妙地利用了视觉元素间的落差感来引导视 线的流动，营造了一种轻松愉快的浏览体验［６１，它的实现的方法 有多种，每种方法都有其各自的优缺点，开发者可以综合多种 方法，达到性能和用户体验的最优化。实验中，数据块内仅仅 插入了图片，在实际运用中还可以加入文字等来丰富数据块的 内容。 参考文献： ［Ｉ徐晔．基于瀑布流式布局的展示类网站界面设计研究［Ｉ】Ｊ】．轻 工科技，２０１５（１２）：１０２—１０３． ［２］张妍．电信新版手机云桌面启用瀑布流布局［Ｎ］．人民邮电， ２０１４—０１－２２００７． ［３】张卫，于梦婷．瀑布流式布局在电子商务网站界面中的创新 设计［Ｊ】．电脑知识与技术，２０１３（３０）：６９４１—６９４２． 【４】梁莉菁．基于ＪａｖａＳｃｒｉｐｔ的瀑布流式网页布局的设计与实现 ［Ｊ］．萍乡学院学报，２０１５（３）：６３—６７． ［５】ｄｈｂｄｆｒ．瀑布流算法．ｈｔｔｐ：／／ｂｌｏｇ．ｓｉｎａ．ｃｏｍ．ｃｎ／ｓ／ｂｌｏｇ＿９ｆ３ｃｅ－ ｃｃ５０１０１ｇｋ７ｒ．ｈｔｍ１． 【６】谢涛．从“瀑布流式布局”谈网页界面的创新设计［Ｊ］．设计艺 术研究。２０１３（２）：３１—３５，３９．
