瀑布流布局的多种实现方式及其比较研究

《瀑布流布局的多种实现方式及其比较研究》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、瀑布流布局的多种实现方式及其比较研究　　摘要：瀑布流布局突破了传统网页的布局方式，不仅设计独特，更能带来良好的用户体验，使得展示类网站在视觉和功效上得到统一。该文从瀑布流布局的核心点出发，首先介绍瀑布流布局的原理，然后利用JavaScript、jQuery、CSS3三种方法实现瀑布流布局效果，并介绍其用到的相关知识点，最后对三种实现方式进行比较，分析其各自性能的优缺点。　　关键词：瀑布流布局；JavaScript；jQuery；CSS3　　中图分类号：TP311文献标识码：A章编号：1009-3044（2016）25-0053-03　　Abstract：Wate

2、rfallflowlayoutbrokethroughthetraditionalwebpagelayout.Itnotonlyhasuniquedesignstyle，butalsocanbringagooduserexperience，sothatthedisplaywebsitescanmakeaaccordanceinthevisualandeffectiveness.Thispaperstartsfromthecorepointofthewaterfallflowlayout.First，theprincipleofwaterfallflowlayou

3、twasintroduced，ThenusethreemethodsasJavaScript，jQuery，CSS3toachievetheeffectofthewaterfallflowlayout，andintroducetherelevantknowledge.Finally，theadvantagesanddisadvantagesofthethreemethodswerecomparedanalyzed.　　Keywords：waterfallflowlayout；javascript；jquery；css36　　1背景　　在“读图时代”的背景下，人们

4、在获取信息时希望通过一种轻松愉快的方式[1]，在面对大量图片汹涌而来时，传统的表格布局、DIV+CSS布局已经不能满足网页的布局要求，新型的瀑布流布局的出现改变了这一现状，成为目前展示类网站中常用的一种布局方式。最早采用此布局的网站是Pinterest，浏览者通过快速扫视屏幕就可以在短时间内获得大量的信息，大大简化的浏览过程，符合人们在移动互联网时代快速浏览的习惯，因此备受追捧[2]。懒加载模式是瀑布流布局的另外一大亮点，用户不需要通过点击鼠标进行翻页，而是通过滑动鼠标滚轮来获取更多信息[3]。　　瀑布流布局的技术实现主要是应用JavaScript技术或jQue

5、ry等JS框架，实现方法的原理基本都相同[4]。本文采用多种方式实现瀑布流布局，并对它们进行比较，分析其各自性能的优缺点。　　2瀑布流布局的实现原理　　瀑布流是一种网站页面布局的形象化描述，其特点是采用定宽而不定高的设计，实现原理主要包含两个部分，一个是对现有数据块进行排列计算各自所在的位置；二是动态加载数据，即下拉滚动时，触发加载数据操作，并把数据添加到目标容器中[5]。　　2.1数据块排列（对容器中已有元素num个进行排列）实现思路如下　　1）固定数据块的宽度；　　2）初始化，对容器中已有数据块元素进行计算，获取可视区域的宽度clientW和数据块的宽度oB

6、oxW，计算页面中的列数cols（clientW/oBoxW）；6　　3）设置容器的宽度（cols*oBoxW）和居中样式；　　4）定义一个数组hArr用来存放每列的高度；　　5）获取hArr中最小的值minH及其所在的索引index；　　6）循环遍历容器中的所有数据块，将其放在minH所在列的下面，根据index，确定该数据块的left，top值，left为所在列的序号index乘以列宽cols，top为所在列的当前高度；　　7）更新所在列的当前高度，值为当前高度加上这个数据块元素的高度。　　2.2动态加载数据　　1）绑定滚动事件，并确定预加载线高度值，即滚动

7、到哪个高度后，需要去加载数据，这里以容器中最后一个数据块的高度（lastBoxH）与滚动距离（scrollTop）加页面高度（height）之和进行比较，若lastBoxHscrollTop+height不进行加载；　　2）将新加载的数据渲染到页面中。　　3实现方式　　瀑布流布局可以用三种方式进行实现：原生JavaScript、jQuery和CSS3，然后利用Jason数据模拟后台数据库来不断提供新的数据，再应用JavaScript动态加载数据块，并渲染到页面中。　　3.1页面结构布局　　瀑布流布局以是以数据块来显示数据的，各个数据块的样式基本相同，不同之处在于

8、数据块内部的文字和图片，