论文部分内容阅读
摘要：瀑布流布局突破了传统网页的布局方式，不仅设计独特，更能带来良好的用户体验，使得展示类网站在视觉和功效上得到统一。该文从瀑布流布局的核心点出发，首先介绍瀑布流布局的原理，然后利用JavaScript、jQuery、CSS3三种方法实现瀑布流布局效果，并介绍其用到的相关知识点，最后对三种实现方式进行比较，分析其各自性能的优缺点。
关键词：瀑布流布局；JavaScript；jQuery；CSS3
中图分类号：TP311 文献标识码：A 章编号：1009-3044（2016）25-0053-03
Abstract： Waterfall flow layout broke through the traditional web page layout .It not only has unique design style， but also can bring a good user experience， so that the display websites can make a accordance in the visual and effectiveness. This paper starts from the core point of the waterfall flow layout. First，the principle of waterfall flow layout was introduced，Then use three methods as JavaScript， jQuery， CSS3 to achieve the effect of the waterfall flow layout， and introduce the relevant knowledge. Finally， the advantages and disadvantages of the three methods were compared analyzed.
Key words： waterfall flow layout； javascript； jquery； css3
1 背景
在“读图时代”的背景下，人们在获取信息时希望通过一种轻松愉快的方式[1]，在面对大量图片汹涌而来时，传统的表格布局、DIV CSS 布局已经不能满足网页的布局要求，新型的瀑布流布局的出现改变了这一现状，成为目前展示类网站中常用的一种布局方式。最早采用此布局的网站是Pinterest，浏览者通过快速扫视屏幕就可以在短时间内获得大量的信息，大大简化的浏览过程，符合人们在移动互联网时代快速浏览的习惯，因此备受追捧[2]。懒加载模式是瀑布流布局的另外一大亮点，用户不需要通过点击鼠标进行翻页，而是通过滑动鼠标滚轮来获取更多信息[3]。
瀑布流布局的技术实现主要是应用 JavaScript 技术或jQuery 等 JS 框架，实现方法的原理基本都相同[4]。本文采用多种方式实现瀑布流布局，并对它们进行比较，分析其各自性能的优缺点。
2 瀑布流布局的实现原理
瀑布流是一种网站页面布局的形象化描述，其特点是采用定宽而不定高的设计，实现原理主要包含两个部分，一个是对现有数据块进行排列计算各自所在的位置； 二是动态加载数据，即下拉滚动时，触发加载数据操作，并把数据添加到目标容器中[5]。
2.1 数据块排列（对容器中已有元素num个进行排列）实现思路如下
1）固定数据块的宽度；
2）初始化，对容器中已有数据块元素进行计算，获取可视区域的宽度clientW和数据块的宽度oBoxW，计算页面中的列数cols（clientW/oBoxW）；
3）设置容器的宽度（cols*oBoxW）和居中样式；
4）定义一个数组hArr用来存放每列的高度；
5）获取hArr中最小的值minH及其所在的索引index；
6）循环遍历容器中的所有数据块，将其放在minH所在列的下面，根据index，确定该数据块的left，top值，left 为所在列的序号index乘以列宽cols，top 为所在列的当前高度；
7）更新所在列的当前高度，值为当前高度加上这个数据块元素的高度。
2.2 动态加载数据
1）绑定滚动事件，并确定预加载线高度值，即滚动到哪个高度后，需要去加载数据，这里以容器中最后一个数据块的高度（lastBoxH）与滚动距离（scrollTop）加页面高度（height）之和进行比较，若lastBoxH< scrollTop height，进行加载数据，若lastBoxH> scrollTop height不进行加载；
2）将新加载的数据渲染到页面中。
3 实现方式
瀑布流布局可以用三种方式进行实现：原生JavaScript、jQuery和CSS3，然后利用Jason 数据模拟后台数据库来不断提供新的数据，再应用 JavaScript动态加载数据块，并渲染到页面中。
3.1 页面结构布局
瀑布流布局以是以数据块来显示数据的，各个数据块的样式基本相同，不同之处在于数据块内部的文字和图片，因此页面结构的布局代码如下：
var dataInt={"data"：[{’src’：’1.jpg’}，{’src’：’2.jpg’}，{’src’：’3.jpg’}，{’src’：’4.jpg’}]}
$（window）.on（’scroll’，function（）{
if （checkScrollSlide） {
//将数据块渲染到页面当中
$.each（dataInt.data，function（index，value）{
var oBox=$（’
关键词：瀑布流布局；JavaScript；jQuery；CSS3
中图分类号：TP311 文献标识码：A 章编号：1009-3044（2016）25-0053-03
Abstract： Waterfall flow layout broke through the traditional web page layout .It not only has unique design style， but also can bring a good user experience， so that the display websites can make a accordance in the visual and effectiveness. This paper starts from the core point of the waterfall flow layout. First，the principle of waterfall flow layout was introduced，Then use three methods as JavaScript， jQuery， CSS3 to achieve the effect of the waterfall flow layout， and introduce the relevant knowledge. Finally， the advantages and disadvantages of the three methods were compared analyzed.
Key words： waterfall flow layout； javascript； jquery； css3
1 背景
在“读图时代”的背景下，人们在获取信息时希望通过一种轻松愉快的方式[1]，在面对大量图片汹涌而来时，传统的表格布局、DIV CSS 布局已经不能满足网页的布局要求，新型的瀑布流布局的出现改变了这一现状，成为目前展示类网站中常用的一种布局方式。最早采用此布局的网站是Pinterest，浏览者通过快速扫视屏幕就可以在短时间内获得大量的信息，大大简化的浏览过程，符合人们在移动互联网时代快速浏览的习惯，因此备受追捧[2]。懒加载模式是瀑布流布局的另外一大亮点，用户不需要通过点击鼠标进行翻页，而是通过滑动鼠标滚轮来获取更多信息[3]。
瀑布流布局的技术实现主要是应用 JavaScript 技术或jQuery 等 JS 框架，实现方法的原理基本都相同[4]。本文采用多种方式实现瀑布流布局，并对它们进行比较，分析其各自性能的优缺点。
2 瀑布流布局的实现原理
瀑布流是一种网站页面布局的形象化描述，其特点是采用定宽而不定高的设计，实现原理主要包含两个部分，一个是对现有数据块进行排列计算各自所在的位置； 二是动态加载数据，即下拉滚动时，触发加载数据操作，并把数据添加到目标容器中[5]。
2.1 数据块排列（对容器中已有元素num个进行排列）实现思路如下
1）固定数据块的宽度；
2）初始化，对容器中已有数据块元素进行计算，获取可视区域的宽度clientW和数据块的宽度oBoxW，计算页面中的列数cols（clientW/oBoxW）；
3）设置容器的宽度（cols*oBoxW）和居中样式；
4）定义一个数组hArr用来存放每列的高度；
5）获取hArr中最小的值minH及其所在的索引index；
6）循环遍历容器中的所有数据块，将其放在minH所在列的下面，根据index，确定该数据块的left，top值，left 为所在列的序号index乘以列宽cols，top 为所在列的当前高度；
7）更新所在列的当前高度，值为当前高度加上这个数据块元素的高度。
2.2 动态加载数据
1）绑定滚动事件，并确定预加载线高度值，即滚动到哪个高度后，需要去加载数据，这里以容器中最后一个数据块的高度（lastBoxH）与滚动距离（scrollTop）加页面高度（height）之和进行比较，若lastBoxH< scrollTop height，进行加载数据，若lastBoxH> scrollTop height不进行加载；
2）将新加载的数据渲染到页面中。
3 实现方式
瀑布流布局可以用三种方式进行实现：原生JavaScript、jQuery和CSS3，然后利用Jason 数据模拟后台数据库来不断提供新的数据，再应用 JavaScript动态加载数据块，并渲染到页面中。
3.1 页面结构布局
瀑布流布局以是以数据块来显示数据的，各个数据块的样式基本相同，不同之处在于数据块内部的文字和图片，因此页面结构的布局代码如下：
var dataInt={"data"：[{’src’：’1.jpg’}，{’src’：’2.jpg’}，{’src’：’3.jpg’}，{’src’：’4.jpg’}]}
$（window）.on（’scroll’，function（）{
if （checkScrollSlide） {
//将数据块渲染到页面当中
$.each（dataInt.data，function（index，value）{
var oBox=$（’
’）.addClass（’box’）.appendTo（$（"#main"））；
var oImg=$（’
var oImg=$（’
’）.addClass（’img’）.appendTo（$（oBox））；
var img=$（’![]()
’）.attr（’src’，’img/’ $（value）.attr（’src’））.appendTo（$（oImg））；
}）
waterfall（）；
}
}）
4 瀑布流布局实现方式比较
JavaScript、 jQuery和CSS3三种方式都可以实现瀑布流效果，但JavaScript和jQuery两种方法实现思路基本一致，因此将其归为JavaScript类，下面对JS和CSS3两种方法进行比较，分析其在性能和用户体验上的优缺点。
1）性能：JavaScript实现的瀑布流中，需要通过计算得到列数，即浏览器窗口的宽度/图片宽度，并且图片的定位是根据每一列的高度来计算接下来图片的位置；而CSS3实现的瀑布流中，浏览器会自动计算显示的列数，只需要设置列宽即可，因此使用CSS3方法要比使用JavaScript或jQuery性能高很多。
2）用户体验：JavaScript实现的瀑布流中，图片进行横向排列，每张图片的位置是通过计算得到的，因此比较规范；CSS3实现的瀑布流中，列宽会随着浏览器矿口的大小进行改变，并且图片的排列顺序是按照垂直排列，这打乱了图片在页面中显示顺序，用户体验不好，此外当滚动滚动条加载图片时，依然需要依靠JavaScript来实现。
5 结束语
瀑布流布局巧妙地利用了视觉元素间的落差感来引导视线的流动，营造了一种轻松愉快的浏览体验[6]，它的实现的方法有多种，每种方法都有其各自的优缺点，开发者可以综合多种方法，达到性能和用户体验的最优化。实验中，数据块内仅仅插入了图片，在实际运用中还可以加入文字等来丰富数据块的内容。
参考文献：
[1] 徐晔. 基于瀑布流式布局的展示类网站界面设计研究[J]. 轻工科技， 2015（12）： 102-103.
[2] 张妍. 电信新版手机云桌面启用瀑布流布局[N]. 人民邮电， 2014-01-22007.
[3] 张卫， 于梦婷. 瀑布流式布局在电子商务网站界面中的创新设计[J]. 电脑知识与技术， 2013（30）： 6941-6942.
[4] 梁莉菁. 基于JavaScript的瀑布流式网页布局的设计与实现[J]. 萍乡学院学报， 2015（3）： 63-67.
[5] dhbdfr. 瀑布流算法. http：//blog.sina.com.cn/s/blog_9f3cecc50101gk7r.html.
[6] 谢涛. 从“瀑布流式布局”谈网页界面的创新设计[J]. 设计艺术研究， 2013（2）： 31-35，39.
var img=$（’
}）
waterfall（）；
}
}）
4 瀑布流布局实现方式比较
JavaScript、 jQuery和CSS3三种方式都可以实现瀑布流效果，但JavaScript和jQuery两种方法实现思路基本一致，因此将其归为JavaScript类，下面对JS和CSS3两种方法进行比较，分析其在性能和用户体验上的优缺点。
1）性能：JavaScript实现的瀑布流中，需要通过计算得到列数，即浏览器窗口的宽度/图片宽度，并且图片的定位是根据每一列的高度来计算接下来图片的位置；而CSS3实现的瀑布流中，浏览器会自动计算显示的列数，只需要设置列宽即可，因此使用CSS3方法要比使用JavaScript或jQuery性能高很多。
2）用户体验：JavaScript实现的瀑布流中，图片进行横向排列，每张图片的位置是通过计算得到的，因此比较规范；CSS3实现的瀑布流中，列宽会随着浏览器矿口的大小进行改变，并且图片的排列顺序是按照垂直排列，这打乱了图片在页面中显示顺序，用户体验不好，此外当滚动滚动条加载图片时，依然需要依靠JavaScript来实现。
5 结束语
瀑布流布局巧妙地利用了视觉元素间的落差感来引导视线的流动，营造了一种轻松愉快的浏览体验[6]，它的实现的方法有多种，每种方法都有其各自的优缺点，开发者可以综合多种方法，达到性能和用户体验的最优化。实验中，数据块内仅仅插入了图片，在实际运用中还可以加入文字等来丰富数据块的内容。
参考文献：
[1] 徐晔. 基于瀑布流式布局的展示类网站界面设计研究[J]. 轻工科技， 2015（12）： 102-103.
[2] 张妍. 电信新版手机云桌面启用瀑布流布局[N]. 人民邮电， 2014-01-22007.
[3] 张卫， 于梦婷. 瀑布流式布局在电子商务网站界面中的创新设计[J]. 电脑知识与技术， 2013（30）： 6941-6942.
[4] 梁莉菁. 基于JavaScript的瀑布流式网页布局的设计与实现[J]. 萍乡学院学报， 2015（3）： 63-67.
[5] dhbdfr. 瀑布流算法. http：//blog.sina.com.cn/s/blog_9f3cecc50101gk7r.html.
[6] 谢涛. 从“瀑布流式布局”谈网页界面的创新设计[J]. 设计艺术研究， 2013（2）： 31-35，39.
其他文献
摘要：该文基于牲畜饲养设计一个电子牧场网络协调器，系统使用RSSI技术实现无线定位功能，使用CC2430作为网络协调器的处理器。分布系统的温度、湿度、位置等信息通过ZigBee无线网络实时传送到中央控制系统进行显示。饲养员根据牲畜的位置分布情况，能够快速准确地找到对应的牲畜，对牲畜进行接种疫苗、阉割以及其他的特殊操作。 关键词：牲畜饲养；电子牧场；网络协调器 中图分类号：TP311 文献标识码
根本经济改革的一项最重要的任务是恢复和广泛发展劳动租赁关系，这是实现社会主义所有制的一种很有发展前途的形式。这不只是关系到农工综合体和亏损的工业企业。还必须利用租
汪永祥在《江淮论坛》87年第2期撰文对我国哲学发展的基本趋势作了如下的预测：1、研究重点的转移。马克思主义创立及以后很长一段时间里，阶级和阶级斗争观点一直作为马克思主义
采用高抗枯萎病西瓜品种一依姆波利亚，在重茬西瓜田种植，将全生育期枯萎病Ｆｕｓａｒｉｕｍ ｏｘｙｓｐｏｒｕｍ Ｓｃｈｉ．ｆ．ＳＰ．ｎｉｖｅｕｍ Ｓｎｙｄｅｒ ｅｔ Ｈａｎｓｅｎ枯死株控制在０．８％，公顷产西瓜达６８．２５ｔ；在３ａ连茬西瓜田和４ａ连茬西瓜种植，全生育期枯萎病枯死株分别为１０．８％和１３．０％，公顷产
摘要：源站路由的思路是让源主机指定一条路径穿越网络。以便测试在某个网络环境上的吞吐量，即使正常的情况下路由器选择的路径中不包含该网络，网络管理员可以使用源站路由强制要求IP数据报经过该网络。路由器将按照所指定的每一个下一跳去路由，不按照路由表的导向去传递数据。它可以使用如下两种技术手段来实现选路：严格源路由和宽松源站。 关键词：源站路由；严格；宽松 中图分类号：TP393 文献标识码：A 文章
赵紫阳同志在十三大报告里指出：“当前，党的马克思主义的理论建设的状况，同我们正在进行的伟大事业相比，是很不相称的。改革开放已进行多年，改革开放的理论研究和宣传教育，仍然是一
在不同的条件下,利用一类正则间隙函数,建立非单调变分不等式问题的两类全局误差界。
摘要：该文针对目前电力系统关口电力计量装置数据采集系统中存在的通信规约不统一、重复开发、维护困难的问题设计完成了一种通用性的通信规约转换模块，该模块基于代理模式，采用分层设计思想，可以适用于现行的大多数规约，规约接口的维护相对简单，提高了电力系统的工作效率。使用该设计模块的关口电力计量装置数据采集系统已经在山西、四川等地运行。 关键词：数据采集；规约转换；代理模式；分层设计 中图分类号：TP3
给出了一种面向当前和未来不对称内存计算平台的OLAP查询处理技术.不对称内存计算平台是指配置有不同计算类型的处理器、不同存储访问设备的计算机,因此需要对OLAP查询处理模