使用Flexbox實(shí)現(xiàn)自適應(yīng)照片佈局，輕量級(jí)且高效！本文介紹一種輕量級(jí)方法，利用Flexbox創(chuàng)建水平瀑布流式照片佈局，無(wú)需JavaScript，即可實(shí)現(xiàn)任意尺寸照片的無(wú)縫排列。

這種方案不僅輕量級(jí)，而且非常簡(jiǎn)單。我們只需要一個(gè)無(wú)序圖像列表和17行CSS代碼，核心在於Flexbox和object-fit屬性。

為什麼選擇這種方法？

我有兩個(gè)愛(ài)好：用照片記錄生活，以及探索CSS屬性（新舊皆可）的有趣組合方式。

幾週前，我參加了XOXO活動(dòng)，拍攝了大量照片，最終篩選出39張精美的照片。為了更好地管理自己的內(nèi)容，過(guò)去幾年我一直想創(chuàng)建一個(gè)簡(jiǎn)單的照片博客，但始終無(wú)法實(shí)現(xiàn)我理想中的佈局：一個(gè)簡(jiǎn)單的瀑布流佈局，照片在保持其縱橫比的同時(shí)填充行（想想iOS上的照片應(yīng)用、Google相冊(cè)、Flickr……）。

我做了一些研究，看看是否有任何輕量級(jí)的、非JavaScript的選項(xiàng)，但找不到任何符合我需求的方案。在等待航班延誤期間，我開始嘗試一些代碼，並限制自己盡可能保持代碼簡(jiǎn)潔（因?yàn)檫@正是我認(rèn)為的樂(lè)趣所在）。

基本HTML結(jié)構(gòu)

由於我基本上是創(chuàng)建一個(gè)圖像列表，所以我選擇了一個(gè)無(wú)序列表：

<li> <li> <!-- ... more images ... -->

Flexbox的妙用

然後是一系列靈光乍現(xiàn)的時(shí)刻：

<li> Flexbox非常適合通過(guò)根據(jù)單元格內(nèi)容確定單元格寬度來(lái)填充行。 <li>這意味著所有圖像（橫向或縱向）都需要具有相同的高度。 <li>我可以使用object-fit: cover;來(lái)確保圖像填充單元格。

理論上，這聽(tīng)起來(lái)像是一個(gè)可靠的方案，它讓我得到了一個(gè)我90%滿意的結(jié)果。

 ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  height: 40vh;
  flex-grow: 1;
}

img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

注意： 40vh對(duì)於桌面瀏覽器來(lái)說(shuō)似乎是最佳的初始方法，它以合理的大小顯示兩行完整的照片，並暗示下面還有更多照片。這也允許每行顯示更多照片，從而顯著改善縱橫比。

處理最後一行伸展問(wèn)題

我遇到的唯一問(wèn)題是Flexbox非常想填充所有行，它對(duì)最後一行照片的縱橫比做了一些奇怪的事情。這可能是我對(duì)這個(gè)佈局最不喜歡的一點(diǎn)，但我不得不在列表的末尾添加一個(gè)空的<li>元素。

 <!-- ... more images ... -->

結(jié)合以下CSS代碼：

 li:last-child {
  flex-grow: 10;
}

注意：這裡使用“10”並沒(méi)有什麼科學(xué)依據(jù)。在我的所有測(cè)試中，這都提供了最佳結(jié)果。

演示（此處應(yīng)插入演示鏈接或代碼片段）

視口優(yōu)化

在不同的視口方向下工作時(shí)，需要考慮一些因素。

豎屏

如果你的視口高度大於寬度，這種方法會(huì)限制每行的照片數(shù)量，從而影響其縱橫比。要解決這個(gè)問(wèn)題，你可以使用簡(jiǎn)單的媒體查詢使照片行變矮：

 @media (max-aspect-ratio: 1/1) {
  li {
    height: 30vh;
  }
}

較短的屏幕

為了適應(yīng)橫向的小型設(shè)備，增加照片的高度有助於盡可能大顯示照片：

 @media (max-height: 480px) {
  li {
    height: 80vh;
  }
}

較小的屏幕豎屏

大多數(shù)手機(jī)不夠?qū)挘瑹o(wú)法讓Flexbox在不縮小照片的情況下正常工作，所以我選擇不嘗試每行容納多張照片。儘管如此，在這裡設(shè)置最大高度仍然值得，這樣你至少可以瞥見(jiàn)列表中的下一張照片。

 @media (max-aspect-ratio: 1/1) and (max-width: 480px) {
  ul {
    flex-direction: column; /* 改為列方向*/
  }

  li {
    height: auto;
    width: 100%;
  }

  img {
    width: 100%;
    max-height: 75vh;
    min-width: 0;
  }
}

總結(jié)

這種方法並沒(méi)有完全尊重照片的縱橫比（但已經(jīng)很接近了），並且偶爾會(huì)導(dǎo)致一些奇怪的結(jié)果，但我絕對(duì)喜歡它的簡(jiǎn)潔性和靈活性。想要讓你的畫廊水平滾動(dòng)而不是垂直滾動(dòng)？只需進(jìn)行一些調(diào)整即可實(shí)現(xiàn)。畫廊中有1000張照片還是只有一張？看起來(lái)都很好。不確定縱橫比？ Flexbox是你的最佳選擇。如果你還沒(méi)有查看演示，請(qǐng)?jiān)倏匆槐?，並告訴我你的想法！

額外提示

根據(jù)這些照片的大小，這樣的頁(yè)面可能會(huì)很快增長(zhǎng)到幾兆字節(jié)。在我的博客中，我添加了loading="lazy"來(lái)解決這個(gè)問(wèn)題。使用該屬性後，圖像只會(huì)在您滾動(dòng)時(shí)接近它們時(shí)才加載。目前它只在Chrome中受支持，但您可以自己編寫一個(gè)更廣泛支持的技術(shù)。

以上是帶有Flexbox的自適應(yīng)照片佈局的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！