等高瀑布流布局的實(shí)現(xiàn)與優(yōu)化

李燕華

（北京市海淀區(qū)職工大學(xué) 北京市 100083）

1 引言

1.1 瀑布流布局

在當(dāng)今的讀圖時(shí)代，瀑布流布局作為前端設(shè)計(jì)中一種流行的布局方式深受用戶喜歡。瀑布流布局，英文名稱“Masonry Layouts”，多用于圖片墻的展示，視覺(jué)表現(xiàn)為將內(nèi)容從上往下、從左往右依次疊加排列。隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，不斷加載內(nèi)容塊并附加至當(dāng)前頁(yè)面的尾部，瀏覽者通過(guò)快速掃視屏幕可以在短時(shí)間內(nèi)獲得大量的信息，符合人們?cè)谝苿?dòng)互聯(lián)網(wǎng)時(shí)代快速瀏覽的習(xí)慣。

1.2 瀑布流布局分類

瀑布流布局分為三種：等寬瀑布流、等高瀑布流和等寬等高瀑布流。

等寬等高瀑布流布局中的圖片為正方形，布局時(shí)上下左右自動(dòng)對(duì)齊，實(shí)現(xiàn)簡(jiǎn)單。等寬瀑布流布局中所有圖片的寬度一致，高度等比例縮放，頁(yè)面底部一般無(wú)法對(duì)齊，可以通過(guò)CSS3、javaScript、jQuery 等多種技術(shù)實(shí)現(xiàn)，董春霞等對(duì)各種實(shí)現(xiàn)方式進(jìn)行了比較。較早的瀑布流布局通常是等寬布局，對(duì)于此種布局的文章和技術(shù)文檔較多，相對(duì)成熟。

等高瀑布流布局中所有圖片的高度一致，寬度等比例縮放。等高瀑布流也有多種實(shí)現(xiàn)方式，李維強(qiáng)等討論了等高瀑布流的原理及實(shí)現(xiàn)。

1.3 等高瀑布流布局

等高瀑布流布局是目前前端設(shè)計(jì)的一種重要布局方式，現(xiàn)在許多電商平臺(tái)和百度圖片等圖片網(wǎng)站都采用等高瀑布流布局。由于圖片尺寸差距懸殊，對(duì)于等高瀑布流布局提出了新的挑戰(zhàn)，如果等高瀑布流布局中所有行高都相同，將會(huì)導(dǎo)致圖片變形，影響頁(yè)面效果。布局整齊、圖片不變形而且能完整顯示是等高瀑布流布局的終極目標(biāo)。本文通過(guò)CSS3 彈性盒子實(shí)現(xiàn)等高瀑布流布局并采用javaScript 技術(shù)優(yōu)化布局并實(shí)現(xiàn)瀑布流圖片動(dòng)態(tài)加載，增強(qiáng)頁(yè)面布局效果、提升用戶體驗(yàn)，為前端設(shè)計(jì)人員和愛(ài)好者提供參考。

2 等高瀑布流布局的實(shí)現(xiàn)

2.1 初始布局

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

本文使用CSS3 彈性盒子布局。CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞剑梢詫?duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間，通過(guò)設(shè)置父級(jí)容器的 display 屬性值為 flex 將其定義為彈性容器。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局，默認(rèn)情況每個(gè)容器只有一行，彈性子元素在一行內(nèi)從左到右顯示。flex-wrap 屬性用于指定彈性盒子的子元素?fù)Q行方式，取值為wrap 時(shí)表示彈性容器為多行，子項(xiàng)溢出的部分會(huì)被放置到新行，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行。在樣式設(shè)置中給父級(jí)元素（此處為定義元素類名為container）設(shè)置彈性布局，讓圖片橫向排列且自動(dòng)換行。

2.2 優(yōu)化布局

初始布局后，設(shè)定了彈性盒子每一行的高度，其子元素的高度即為行高，寬度由內(nèi)部圖片撐開(kāi)，默認(rèn)情況下圖片按照原始寬高比進(jìn)行縮放，所以在元素設(shè)置彈性布局后，當(dāng)一行內(nèi)不能容納下一個(gè)子元素時(shí)回自動(dòng)換行，這樣使得彈性布局每一行的右邊不能對(duì)齊。

CSS3 提供的flex-grow 屬性用于設(shè)置或檢索彈性盒子的擴(kuò)展比率，可以通過(guò)給彈性盒的子元素設(shè)置flex-grow 屬性，使子元素放大自動(dòng)撐滿父級(jí)每一行的剩余空間，如在樣式設(shè)置中給彈性盒container 的子元素image-item 設(shè)置flexgrow:1，表示子元素平分所在行剩余空間，從而使每行寬度相等、右側(cè)對(duì)齊。

2.3 處理最后一行

如果彈性盒子最后一行元素量過(guò)少，因?yàn)樾懈咭呀?jīng)固定，2.2 中設(shè)置了子元素的flex-grow 屬性值為1，子元素會(huì)擴(kuò)大占滿所在行剩余空間，從而導(dǎo)致圖片寬高比失調(diào)，圖片不能正常顯示。通過(guò)給父元素彈性盒子的末尾添加一個(gè)無(wú)內(nèi)容的子元素，并將其flex-grow 屬性值設(shè)置的足夠大，讓其占據(jù)最多的剩余空間，這樣能保證最后一行圖片數(shù)量過(guò)少時(shí)，圖片依然能夠正常顯示。CSS 的“:after”選擇器可以向選定元素的最后子元素后面插入內(nèi)容，此處在樣式設(shè)置中為container 彈性盒子添加“:after”選擇器并設(shè)置內(nèi)容為空。

頁(yè)面的結(jié)構(gòu)：

頁(yè)面顯示效果如圖1 所示。

圖1： 頁(yè)面顯示效果

通過(guò)以上HTML 結(jié)構(gòu)和CSS 樣式設(shè)置，一個(gè)每行高度、寬度相同、圖片個(gè)數(shù)不同的簡(jiǎn)單等高瀑布流布局就形成了。

3 等高瀑布流布局的優(yōu)化

當(dāng)前的瀑布流布局每行高度相同，此處暫時(shí)設(shè)置為200px，同一行中每個(gè)子元素平分本行剩余的空間——flexgrow: 1，由于沒(méi)有考慮同一行中不同子元素中所包含圖片的寬高比例不同，導(dǎo)致有些圖片被拉伸變形。

3.1 優(yōu)化布局的基本思路

等高瀑布流布局中，根據(jù)實(shí)際情況和頁(yè)面美觀可以設(shè)置同一行的圖片高度一致，不同行之間高度可以不同，即為不同行設(shè)置不同高度；在同一行中的各個(gè)子元素應(yīng)該根據(jù)自身所包含的圖片寬高比分配本行剩余寬度，即重新按照?qǐng)D片比例分配每一行的剩余空間。因此應(yīng)該設(shè)定行高和每行剩余空間分配兩個(gè)方面進(jìn)行頁(yè)面布局的優(yōu)化。

3.2 優(yōu)化布局的方法

首先重新計(jì)算彈性盒子的子元素尺寸，因?yàn)槊總€(gè)子元素是由其所包含的圖片撐開(kāi)的，而且圖片尺寸都不相同，所以需要分別計(jì)算每個(gè)彈性盒子的子元素尺寸，可以使用javaScript 技術(shù)實(shí)現(xiàn)。先設(shè)定一個(gè)高度初始值（此處為200px），根據(jù)初始高度和所包含的圖片的寬高比計(jì)算得到彈性盒子元素的寬度。

重新設(shè)置彈性盒子子元素的flex-grow 屬性值為自身的寬度，使得同一行中的彈性子元素根據(jù)自身實(shí)際寬度分配本行剩余空間，實(shí)現(xiàn)了整行空間按照子元素實(shí)際寬度進(jìn)行分配。

完成以上兩步后把預(yù)設(shè)的初始高度值去掉，此時(shí)彈性盒子子元素的高度將由圖片撐開(kāi)。因?yàn)樽釉氐膶挾戎凳歉鶕?jù)圖片寬高比計(jì)算的，所以彈性子元素的高度與圖片高度相同，對(duì)于同一行的剩余空間，分配時(shí)按照子元素的寬度比例分配。當(dāng)分配剩余寬度時(shí)，由于各子元素的寬度按照?qǐng)D片的寬高比設(shè)置的，子元素的高度將根據(jù)圖片寬高比進(jìn)行微調(diào)，所以此時(shí)的縮放與圖片的寬高比一致，從而實(shí)現(xiàn)了圖片原比例縮放并完整顯示。

3.3 優(yōu)化瀑布流布局的JavaScript代碼：

3.4 優(yōu)化后的等高瀑布流頁(yè)面效果

如圖2 所示。

圖2： 優(yōu)化后的等高瀑布流頁(yè)面效果

這樣就實(shí)現(xiàn)了右側(cè)對(duì)齊、同一行各個(gè)圖片高度相同、不同行的行高不同、所有圖片不變形且完整顯示的完美等高瀑布流布局。

4 圖片動(dòng)態(tài)加載

圖片動(dòng)態(tài)加載是瀑布流布局的另外一大亮點(diǎn)，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，會(huì)不斷加載圖片并附加至當(dāng)前尾部，用戶不需要點(diǎn)擊鼠標(biāo)進(jìn)行翻頁(yè)，而是通過(guò)滑動(dòng)鼠標(biāo)滾輪來(lái)獲取更多信息。對(duì)于上線的網(wǎng)站，前端通過(guò)AJAX 向服務(wù)器端發(fā)送請(qǐng)求，獲取數(shù)據(jù)庫(kù)中的圖片數(shù)據(jù)，再通過(guò)javaScript 將數(shù)據(jù)動(dòng)態(tài)渲染至頁(yè)面。在這里，采用類AJAX 技術(shù)模擬圖片動(dòng)態(tài)加載，完全在前端實(shí)現(xiàn)，不涉及后臺(tái)技術(shù)。

4.1 圖片動(dòng)態(tài)加載條件判斷

圖片動(dòng)態(tài)加載首選需要確定什么時(shí)間加載圖片，應(yīng)該是在滾動(dòng)條觸底時(shí)進(jìn)行圖片的加載。當(dāng)滾動(dòng)條到達(dá)顯示窗口底部時(shí)獲取圖片信息、將其生成DOM 元素，并添加到彈性盒子中，渲染形成瀑布流布局中的圖片，從而完成圖片動(dòng)態(tài)加載的效果。

有多種方式可以判斷滾動(dòng)條是否已經(jīng)觸底，可以通過(guò)彈性盒子中最后一個(gè)子元素是否已經(jīng)進(jìn)入了視口來(lái)判斷滾動(dòng)條是否觸底，即當(dāng)頁(yè)面中最后一個(gè)子元素的頂端到視口頂部的距離小于視口的高度時(shí)，滾動(dòng)條就觸底了。構(gòu)造函數(shù)DOMRect 的getBoundingClientRect()方法可以返回元素的大小及其相對(duì)于視口的位置，getBoundingClientRect()的top屬性表示元素到視口頂部的距離。因此將最后子元素到視口頂部的距離 getBoundingClientRect().top 與窗口顯示區(qū)的高度window.innerHeight 比較即可判斷是否需要加載圖片。

4.2 圖片動(dòng)態(tài)加載的javaScript代碼

4.3 完成動(dòng)態(tài)圖片加載的頁(yè)面效果

如圖3 所示。通過(guò)添加滾動(dòng)事件，實(shí)現(xiàn)了圖片的動(dòng)態(tài)加載，而且加載后的圖片按照前面設(shè)置的等高瀑布流布局進(jìn)行渲染。

圖3： 完成動(dòng)態(tài)圖片加載的頁(yè)面效果

5 結(jié)語(yǔ)

雖然現(xiàn)在流行的javaScript框架大都提供了瀑布流控件、方便直接調(diào)用，但瀑布流布局作為一種典型的圖片布局方式，前端設(shè)計(jì)人員應(yīng)該熟悉其實(shí)現(xiàn)的原理，只有這樣才能能夠根據(jù)實(shí)際需要選擇合適的布局并進(jìn)行優(yōu)化。

本論文深入探討了等高瀑布流的實(shí)現(xiàn)及優(yōu)化，并使用javaScript 技術(shù)實(shí)現(xiàn)了圖片動(dòng)態(tài)加載。直接在前端做圖片動(dòng)態(tài)加載，數(shù)據(jù)量較少，因此直接加載圖片，沒(méi)有做圖片懶加載，在實(shí)際開(kāi)發(fā)中，從服務(wù)器上獲取圖片，圖片尺寸一般很大而且數(shù)量多，直接加載圖片會(huì)極大耗費(fèi)平臺(tái)性能，延遲頁(yè)面加載速度，應(yīng)該采用圖片懶加載技術(shù)。