等高瀑布流布局的实现与优化

李燕华

（北京市海淀区职工大学 北京市 100083）

1 引言

1.1 瀑布流布局

在当今的读图时代，瀑布流布局作为前端设计中一种流行的布局方式深受用户喜欢。瀑布流布局，英文名称“Masonry Layouts”，多用于图片墙的展示，视觉表现为将内容从上往下、从左往右依次叠加排列。随着页面滚动条向下滚动，不断加载内容块并附加至当前页面的尾部，浏览者通过快速扫视屏幕可以在短时间内获得大量的信息，符合人们在移动互联网时代快速浏览的习惯。

1.2 瀑布流布局分类

瀑布流布局分为三种：等宽瀑布流、等高瀑布流和等宽等高瀑布流。

等宽等高瀑布流布局中的图片为正方形，布局时上下左右自动对齐，实现简单。等宽瀑布流布局中所有图片的宽度一致，高度等比例缩放，页面底部一般无法对齐，可以通过CSS3、javaScript、jQuery 等多种技术实现，董春霞等对各种实现方式进行了比较。较早的瀑布流布局通常是等宽布局，对于此种布局的文章和技术文档较多，相对成熟。

等高瀑布流布局中所有图片的高度一致，宽度等比例缩放。等高瀑布流也有多种实现方式，李维强等讨论了等高瀑布流的原理及实现。

1.3 等高瀑布流布局

等高瀑布流布局是目前前端设计的一种重要布局方式，现在许多电商平台和百度图片等图片网站都采用等高瀑布流布局。由于图片尺寸差距悬殊，对于等高瀑布流布局提出了新的挑战，如果等高瀑布流布局中所有行高都相同，将会导致图片变形，影响页面效果。布局整齐、图片不变形而且能完整显示是等高瀑布流布局的终极目标。本文通过CSS3 弹性盒子实现等高瀑布流布局并采用javaScript 技术优化布局并实现瀑布流图片动态加载，增强页面布局效果、提升用户体验，为前端设计人员和爱好者提供参考。

2 等高瀑布流布局的实现

2.1 初始布局

等高瀑布流布局中的图片从左往右依次排列，且所有图片高度相等，图片按比例放大或缩小。

本文使用CSS3 弹性盒子布局。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，可以对一个容器中的子元素进行排列、对齐和分配空白空间，通过设置父级容器的 display 属性值为 flex 将其定义为弹性容器。弹性盒子只定义了弹性子元素如何在弹性容器内布局，默认情况每个容器只有一行，弹性子元素在一行内从左到右显示。flex-wrap 属性用于指定弹性盒子的子元素换行方式，取值为wrap 时表示弹性容器为多行，子项溢出的部分会被放置到新行，子项内部会发生断行。在样式设置中给父级元素（此处为定义元素类名为container）设置弹性布局，让图片横向排列且自动换行。

2.2 优化布局

初始布局后，设定了弹性盒子每一行的高度，其子元素的高度即为行高，宽度由内部图片撑开，默认情况下图片按照原始宽高比进行缩放，所以在元素设置弹性布局后，当一行内不能容纳下一个子元素时回自动换行，这样使得弹性布局每一行的右边不能对齐。

CSS3 提供的flex-grow 属性用于设置或检索弹性盒子的扩展比率，可以通过给弹性盒的子元素设置flex-grow 属性，使子元素放大自动撑满父级每一行的剩余空间，如在样式设置中给弹性盒container 的子元素image-item 设置flexgrow:1，表示子元素平分所在行剩余空间，从而使每行宽度相等、右侧对齐。

2.3 处理最后一行

如果弹性盒子最后一行元素量过少，因为行高已经固定，2.2 中设置了子元素的flex-grow 属性值为1，子元素会扩大占满所在行剩余空间，从而导致图片宽高比失调，图片不能正常显示。通过给父元素弹性盒子的末尾添加一个无内容的子元素，并将其flex-grow 属性值设置的足够大，让其占据最多的剩余空间，这样能保证最后一行图片数量过少时，图片依然能够正常显示。CSS 的“:after”选择器可以向选定元素的最后子元素后面插入内容，此处在样式设置中为container 弹性盒子添加“:after”选择器并设置内容为空。

页面的结构：

页面显示效果如图1 所示。

图1： 页面显示效果

通过以上HTML 结构和CSS 样式设置，一个每行高度、宽度相同、图片个数不同的简单等高瀑布流布局就形成了。

3 等高瀑布流布局的优化

当前的瀑布流布局每行高度相同，此处暂时设置为200px，同一行中每个子元素平分本行剩余的空间——flexgrow: 1，由于没有考虑同一行中不同子元素中所包含图片的宽高比例不同，导致有些图片被拉伸变形。

3.1 优化布局的基本思路

等高瀑布流布局中，根据实际情况和页面美观可以设置同一行的图片高度一致，不同行之间高度可以不同，即为不同行设置不同高度；在同一行中的各个子元素应该根据自身所包含的图片宽高比分配本行剩余宽度，即重新按照图片比例分配每一行的剩余空间。因此应该设定行高和每行剩余空间分配两个方面进行页面布局的优化。

3.2 优化布局的方法

首先重新计算弹性盒子的子元素尺寸，因为每个子元素是由其所包含的图片撑开的，而且图片尺寸都不相同，所以需要分别计算每个弹性盒子的子元素尺寸，可以使用javaScript 技术实现。先设定一个高度初始值（此处为200px），根据初始高度和所包含的图片的宽高比计算得到弹性盒子元素的宽度。

重新设置弹性盒子子元素的flex-grow 属性值为自身的宽度，使得同一行中的弹性子元素根据自身实际宽度分配本行剩余空间，实现了整行空间按照子元素实际宽度进行分配。

完成以上两步后把预设的初始高度值去掉，此时弹性盒子子元素的高度将由图片撑开。因为子元素的宽度值是根据图片宽高比计算的，所以弹性子元素的高度与图片高度相同，对于同一行的剩余空间，分配时按照子元素的宽度比例分配。当分配剩余宽度时，由于各子元素的宽度按照图片的宽高比设置的，子元素的高度将根据图片宽高比进行微调，所以此时的缩放与图片的宽高比一致，从而实现了图片原比例缩放并完整显示。

3.3 优化瀑布流布局的JavaScript代码：

3.4 优化后的等高瀑布流页面效果

如图2 所示。

图2： 优化后的等高瀑布流页面效果

这样就实现了右侧对齐、同一行各个图片高度相同、不同行的行高不同、所有图片不变形且完整显示的完美等高瀑布流布局。

4 图片动态加载

图片动态加载是瀑布流布局的另外一大亮点，随着页面滚动条向下滚动，会不断加载图片并附加至当前尾部，用户不需要点击鼠标进行翻页，而是通过滑动鼠标滚轮来获取更多信息。对于上线的网站，前端通过AJAX 向服务器端发送请求，获取数据库中的图片数据，再通过javaScript 将数据动态渲染至页面。在这里，采用类AJAX 技术模拟图片动态加载，完全在前端实现，不涉及后台技术。

4.1 图片动态加载条件判断

图片动态加载首选需要确定什么时间加载图片，应该是在滚动条触底时进行图片的加载。当滚动条到达显示窗口底部时获取图片信息、将其生成DOM 元素，并添加到弹性盒子中，渲染形成瀑布流布局中的图片，从而完成图片动态加载的效果。

有多种方式可以判断滚动条是否已经触底，可以通过弹性盒子中最后一个子元素是否已经进入了视口来判断滚动条是否触底，即当页面中最后一个子元素的顶端到视口顶部的距离小于视口的高度时，滚动条就触底了。构造函数DOMRect 的getBoundingClientRect()方法可以返回元素的大小及其相对于视口的位置，getBoundingClientRect()的top属性表示元素到视口顶部的距离。因此将最后子元素到视口顶部的距离 getBoundingClientRect().top 与窗口显示区的高度window.innerHeight 比较即可判断是否需要加载图片。

4.2 图片动态加载的javaScript代码

4.3 完成动态图片加载的页面效果

如图3 所示。通过添加滚动事件，实现了图片的动态加载，而且加载后的图片按照前面设置的等高瀑布流布局进行渲染。

图3： 完成动态图片加载的页面效果

5 结语

虽然现在流行的javaScript框架大都提供了瀑布流控件、方便直接调用，但瀑布流布局作为一种典型的图片布局方式，前端设计人员应该熟悉其实现的原理，只有这样才能能够根据实际需要选择合适的布局并进行优化。

本论文深入探讨了等高瀑布流的实现及优化，并使用javaScript 技术实现了图片动态加载。直接在前端做图片动态加载，数据量较少，因此直接加载图片，没有做图片懒加载，在实际开发中，从服务器上获取图片，图片尺寸一般很大而且数量多，直接加载图片会极大耗费平台性能，延迟页面加载速度，应该采用图片懒加载技术。