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

摘要：瀑布流布局突破了传统网页的布局方式，不仅设计独特，更能带来良好的用户体验，使得展示类网站在视觉和功效上得到统一。该文从瀑布流布局的核心点出发，首先介绍瀑布流布局的原理，然后利用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.

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

瀑布流布局的技术实现主要是应用 JavaScript 技术或jQuery 等 JS 框架，实现方法的原理基本都相同[4]。本文采用多种方式实现瀑布流布局，并对它们进行比较，分析其各自性能的优缺点。

瀑布流是一种网站页面布局的形象化描述，其特点是采用定宽而不定高的设计，实现原理主要包含两个部分，一个是对现有数据块进行排列计算各自所在的位置；二是动态加载数据，即下拉滚动时，触发加载数据操作，并把数据添加到目标容器中[5]。

2.1 数据块排列（对容器中已有元素num个进行排列）实现思路如下

2）初始化，对容器中已有数据块元素进行计算，获取可视区域的宽度clientW和数据块的宽度oBoxW，计算页面中的列数cols（clientW/oBoxW）；

6）循环遍历容器中的所有数据块，将其放在minH所在列的下面，根据index，确定该数据块的left，top值，left 为所在列的序号index乘以列宽cols，top 为所在列的当前高度；

7）更新所在列的当前高度，值为当前高度加上这个数据块元素的高度。

1）绑定滚动事件，并确定预加载线高度值，即滚动到哪个高度后，需要去加载数据，这里以容器中最后一个数据块的高度（lastBoxH）与滚动距离（scrollTop）加页面高度（height）之和进行比较，若lastBoxH< scrollTop+ height，进行加载数据，若lastBoxH> scrollTop+ height不进行加载；

瀑布流布局可以用三种方式进行实现：原生JavaScript、jQuery和CSS3，然后利用Jason 数据模拟后台数据库来不断提供新的数据，再应用 JavaScript动态加载数据块，并渲染到页面中。

瀑布流布局以是以数据块来显示数据的，各个数据块的样式基本相同，不同之处在于数据块内部的文字和图片，因此页面结构的布局代码如下：

1 [2] [3] 存入我的阅览室