带有Flexbox的自适应照片布局

使用Flexbox实现自适应照片布局，轻量级且高效！本文介绍一种轻量级方法，利用Flexbox创建水平瀑布流式照片布局，无需JavaScript，即可实现任意尺寸照片的无缝排列。

这种方案不仅轻量级，而且非常简单。我们只需要一个无序图像列表和17行CSS代码，核心在于Flexbox和object-fit属性。

为什么选择这种方法？

我有两个爱好：用照片记录生活，以及探索CSS属性（新旧皆可）的有趣组合方式。

几周前，我参加了XOXO活动，拍摄了大量照片，最终筛选出39张精美的照片。为了更好地管理自己的内容，过去几年我一直想创建一个简单的照片博客，但始终无法实现我理想中的布局：一个简单的瀑布流布局，照片在保持其纵横比的同时填充行（想想iOS上的照片应用、Google相册、Flickr……）。

我做了一些研究，看看是否有任何轻量级的、非JavaScript的选项，但找不到任何符合我需求的方案。在等待航班延误期间，我开始尝试一些代码，并限制自己尽可能保持代码简洁（因为这正是我认为的乐趣所在）。

基本HTML结构

由于我基本上是创建一个图像列表，所以我选择了一个无序列表：

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

Flexbox的妙用

然后是一系列灵光乍现的时刻：

<li>Flexbox非常适合通过根据单元格内容确定单元格宽度来填充行。 <li>这意味着所有图像（横向或纵向）都需要具有相同的高度。 <li>我可以使用object-fit: cover;来确保图像填充单元格。

理论上，这听起来像是一个可靠的方案，它让我得到了一个我90%满意的结果。

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 对于桌面浏览器来说似乎是最佳的初始方法，它以合理的大小显示两行完整的照片，并暗示下面还有更多照片。这也允许每行显示更多照片，从而显著改善纵横比。

处理最后一行伸展问题

我遇到的唯一问题是Flexbox 非常想填充所有行，它对最后一行照片的纵横比做了一些奇怪的事情。这可能是我对这个布局最不喜欢的一点，但我不得不在列表的末尾添加一个空的<li>元素。

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

<li>

结合以下CSS代码：

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

注意： 这里使用“10”并没有什么科学依据。在我的所有测试中，这都提供了最佳结果。

演示（此处应插入演示链接或代码片段）

视口优化

在不同的视口方向下工作时，需要考虑一些因素。

竖屏

如果你的视口高度大于宽度，这种方法会限制每行的照片数量，从而影响其纵横比。要解决这个问题，你可以使用简单的媒体查询使照片行变矮：

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

较短的屏幕

为了适应横向的小型设备，增加照片的高度有助于尽可能大显示照片：

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

较小的屏幕 竖屏

大多数手机不够宽，无法让Flexbox在不缩小照片的情况下正常工作，所以我选择不尝试每行容纳多张照片。尽管如此，在这里设置最大高度仍然值得，这样你至少可以瞥见列表中的下一张照片。

@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;
  }
}

总结

这种方法并没有完全尊重照片的纵横比（但已经很接近了），并且偶尔会导致一些奇怪的结果，但我绝对喜欢它的简洁性和灵活性。想要让你的画廊水平滚动而不是垂直滚动？只需进行一些调整即可实现。画廊中有1000张照片还是只有一张？看起来都很好。不确定纵横比？Flexbox是你的最佳选择。如果你还没有查看演示，请再看一遍，并告诉我你的想法！

额外提示

根据这些照片的大小，这样的页面可能会很快增长到几兆字节。在我的博客中，我添加了loading="lazy"来解决这个问题。使用该属性后，图像只会在您滚动时接近它们时才加载。目前它只在Chrome中受支持，但您可以自己编写一个更广泛支持的技术。

以上是带有Flexbox的自适应照片布局的详细内容。更多信息请关注PHP中文网其他相关文章！