將圖片排版引入到博客中是我自己的一個(gè)小需求。有時(shí)候想要分享一些平時(shí)的隨手拍，但是直接在網(wǎng)頁(yè)上一張張堆疊照片又顯得并不美觀，因此著手研究這個(gè)功能。
- 代碼來(lái)源：詳情
第一次的嘗試實(shí)現(xiàn)是在 RAW 主題里，在這里可以看到效果。看似還行，但其實(shí)非常 naive，在許多情況下都會(huì)出現(xiàn) bug 導(dǎo)致版式錯(cuò)亂。
目前我的最佳實(shí)現(xiàn)已經(jīng)應(yīng)用在了 VOID 主題中。另外，VOID 主題用戶(hù)中也有深度使用了這個(gè)功能的，例如這里，效果也足夠令人滿(mǎn)意，那么這篇文章就說(shuō)說(shuō)實(shí)現(xiàn)細(xì)節(jié)。
常見(jiàn)的圖片排版方式
在網(wǎng)頁(yè)上展示圖片集合一般有幾種方式：裁切為正方形、縱向瀑布流、橫向排版。當(dāng)然除了這三者，還有諸如 slider、popover 等展示方式，這些展示方式不在本文討論之列。
裁切為正方形的展示方式很常見(jiàn)，微博、朋友圈等都是這樣；Twitter 雖然有些許變化（不是所有的圖片都等大），但是也在裁切為正方形的陣營(yíng)里。背后的原因有產(chǎn)品上的考慮，也有技術(shù)上的考慮，在此不多說(shuō)。但是若從個(gè)人分享攝影作品的角度來(lái)說(shuō)裁切為正方形算不上是好的方案，因?yàn)榭傆幸徊糠窒袼貢?huì)丟失，除非看客有意點(diǎn)擊展開(kāi)，否則這部分內(nèi)容就沒(méi)有機(jī)會(huì)被展示了。況且某些照片有著精妙的構(gòu)圖，沒(méi)人希望自己的構(gòu)圖被破壞。
縱向瀑布流也是很常見(jiàn)的展示方式，主要應(yīng)用在專(zhuān)職展示圖片的網(wǎng)站上，例如?Pinterest、Unsplash。這種展示方式的特點(diǎn)是列數(shù)一定，但是每列中的圖片高度不一，圖片能夠保持自己的寬高比。這是不錯(cuò)的方案，特別是應(yīng)用在無(wú)限滾動(dòng)的網(wǎng)頁(yè)上，不過(guò)也有一個(gè)相當(dāng)大的缺點(diǎn)：不適合圖文混排。圖片列數(shù)一定，每列高度不同，自然使得最底下一行參差不齊，不適合作為文章中插入圖片的方式。另外，這個(gè)方式有一個(gè)缺點(diǎn)：圖片順序不易保持，這是縱向瀑布流的通病，因此不論是內(nèi)容塊還是圖片，縱向瀑布流都更適合順序不那么重要的場(chǎng)景。
以上兩種方式各自有自己的應(yīng)用場(chǎng)景，但不是本文要重點(diǎn)講的方式，因此其技術(shù)細(xì)節(jié)也就略過(guò)了（實(shí)際上也不難）。本文主要說(shuō)圖片的橫向排版，效果如下（請(qǐng)?jiān)陔娔X端查看完整效果）：
特點(diǎn)顯而易見(jiàn)：圖片排版以行為單位，每行中可以有任意張任意寬高比的圖片，因此只需要處理一行中的圖片排版問(wèn)題，那么無(wú)論再來(lái)多少行效果都令人滿(mǎn)意。應(yīng)用這種排版方式的網(wǎng)站有?500px、百度圖片等。
實(shí)現(xiàn)細(xì)節(jié)
HTML 與 CSS
我們只關(guān)注一行圖片。為了使文章具有足夠的參考價(jià)值，我這里使用完整的 HTML 結(jié)構(gòu)（這也是 VOID 使用的 HTML 結(jié)構(gòu)）：
<div class="photos">
<figure>
<div><img src="..." /></div>
<figcaption>...</figcaption>
</figure>
... <!--若干個(gè)類(lèi)似的 figure 結(jié)構(gòu)-->
</div>使用 figure 標(biāo)簽是為了使每張圖片都有完整的展示與圖題。照例，看 Demo：
從 HTML 結(jié)構(gòu)中可以看出，div.photos?是一行圖片的容器，每張圖標(biāo)使用?figure?包裹，并且在?img?標(biāo)簽外套上一層?div，這是為了模擬某些情況下的特殊需求（例如燈箱）。
最外層的容器?div.photos?設(shè)定為 flex 布局，方向?yàn)闄M向（flex-wrap: wrap 是為了在小屏幕下使用媒體查詢(xún)使圖片每張占一行，否則圖片就會(huì)小得看不清了……）。
figure?標(biāo)簽除了一個(gè) margin 屬性用來(lái)控制間距和一個(gè) position 屬性來(lái)指定定位方式之外沒(méi)有更多的內(nèi)容。figure?下的?div?標(biāo)簽顯式地指定了 height 為 0，并指定了 position 為 relative。這兩個(gè)標(biāo)簽上的樣式并不多，但是圖片排版全看這兩個(gè)標(biāo)簽的定位與尺寸，這部分放到后面。
首先不妨假設(shè)?div?標(biāo)簽與?figure?標(biāo)簽都有了合適的大小，那么?img?很好處理，指定為絕對(duì)定位，并且使之長(zhǎng)寬等于父元素的長(zhǎng)寬即可。現(xiàn)在就來(lái)看看如何使?div?標(biāo)簽與?figure?標(biāo)簽合理布局。
關(guān)鍵的部分
核心知識(shí)點(diǎn)有兩個(gè)：padding-top?與?flex-grow。
padding-top 用來(lái)保持寬高比的 trick 想必很多人都知道。根據(jù)?MDN：
當(dāng)內(nèi)邊距（padding）是一個(gè)百分比的時(shí)候， 百分比是和包含塊（containing block）的寬度有關(guān)的…
當(dāng) img 標(biāo)簽的直接父元素（即 div）得到了合理的寬度，然后通過(guò) padding-top 屬性來(lái)維持容器寬高比與圖片寬高比相同。這樣 div 本身 height 為 0，但是通過(guò) padding-top 將它撐大，img 標(biāo)簽相對(duì)它絕對(duì)定位，尺寸與之相同，就是合理的結(jié)果。
最后只剩下一個(gè)關(guān)鍵的點(diǎn)：img 父元素即 div 的寬度如何確定。這個(gè)問(wèn)題就是解決如何將一批長(zhǎng)寬比不盡相同的圖片塞到一行里并且保證底部平齊。
這里用到了 flex 布局的一個(gè)知識(shí)點(diǎn)：flex-grow。flex 布局中允許容器中的元素拉伸以填充整個(gè)容器的可用空間，其中每個(gè)子元素的拉伸比例即可通過(guò) flex-grow 定義。例如：
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}這段 CSS 使得第二個(gè)元素在拉伸時(shí)寬度總是別的元素的 3 倍。flex-grow 的值不重要，值之間的比值才重要。若能夠在拉伸時(shí)保持各元素的比例，那么事情就變得簡(jiǎn)單了一些：只需要先把一行元素的高度都搞到相同，然后在橫向按比例拉伸，那么問(wèn)題便解決了。
先說(shuō)實(shí)踐方案，首先定義一個(gè)“基準(zhǔn)值”（上面的 Demo 中是 50），然后計(jì)算把每張圖片都縮到高度為基準(zhǔn)值時(shí)圖片的寬度。設(shè)圖片原始寬度為?ww?與?hh，基準(zhǔn)值?base=50base=50?，則圖片等比縮到 50px 時(shí)的寬度為：
對(duì)每個(gè)容器如此處理，即可得到一行高度為 50px 且寬高比與圖片相同的容器，這時(shí)再指定 flex-grow 使容器填充一行內(nèi)的可用空間。這一步很巧妙，每個(gè)容器的 flex-grow 只需要設(shè)置為：
也就是 flex-grow 與?w’w′?恰好相同即可。這是由于前面所述的，“flex-grow 的值不重要，值之間的比值才重要”。此時(shí)就完成了整個(gè)排版，至于如何獲得圖片的原始尺寸等屬于細(xì)枝末節(jié)的問(wèn)題，看 Demo 代碼即可。
這篇文章也屬于 VOID 主題開(kāi)發(fā)過(guò)程的技術(shù)筆記。寫(xiě)主題好玩，寫(xiě)完了繼續(xù)維護(hù)就不好玩了……希望到 2.0 版本的時(shí)候能夠到達(dá)比較穩(wěn)定的狀態(tài)，然后就進(jìn)入 LTS 階段吧。