现代CSS 实现照片画廊布局

我们经常会遇到不同布局的照片墙展示图片,下面来使用纯CSS 实现照片墙。

响应式布局Responsive Layout

首先我们设想画廊在大屏上面的显示效果是这样的:


大屏显示效果

在较小的屏幕上(例如< 50 em),应该有以下效果:


较小屏幕显示效果

这个标签简单写成
<div>
   <a href="path-to-the-image"> 
    <figure> 
      <img src="path-to-the-image" alt=""> 
    </figure> 
  </a>
 <!-- other anchors here ... --></div>

正如你可能已经知道的,我们可以利用不同的布局方法来产生期望的结果。此前我测试了两种不同的方法,让我们记下我们的初始需求(见上面的图片):

  • 我想要在中等屏幕上和较小屏幕(例如<50em)上实现两列布局,在大屏幕(例如:50em 及以上)上实现4列布局
  • 相邻列之间的距离一直为8px

用 inline-block

我将会用display: inline-block 方法去构建我们的照片墙。参照下面的CSS:

div {
  font-size: 0;
}
a {
    font-size: 16px; 
    display: inline-block;
    margin-bottom: 8px;
    width: calc(50% - 4px);
    margin-right: 8px;
}
a:nth-of-type(2n) {
    margin-right: 0;
}
@media screen and (min-width: 50em) {
    a {
      width: calc(25% - 6px);
    }
    a:nth-of-type(2n) {
      margin-right: 8px;
    }
    a:nth-of-type(4n) {
      margin-right: 0;
    }
}

解释一下上面的代码:
默认情况下,inline-block元素之间有一个空格。一个解决这个问题的方法是父元素的字体大小设置为0。这意味着我们要重置所有子元素的字体大小(在我们的例子中没有必要)。
在小屏幕上,我们的2列布局相邻列的间距为8px。
这个列的宽度计算如下:

  • 每一行列与列之间的空隙总和 =1 * 8 px = > 8 px。得到的值为8px,而不是16 px,因为我删除了每行第二列在小屏幕上的右边距。
  • 每一列的宽度=calc(50% - 4 px)。这个4 px通过该计算可得:每一行总共的列间隙/每一行列数(8 px / 2 = > 4 px)。
    两列图片宽度示意

    在大屏幕中设计4列布局,依然保持列间距为8px,因此,列宽的计算如下:
  • 每一行列与列之间的空隙总和 = 3 * 8 px = > 24 px。得到的值为24px,而不是32 px,因为我删除了每行第四列在小屏幕上的右边距。
  • 每一列的宽度= calc(25% - 6 px)。这个6 px通过该计算可得:每一行总共的列间隙/每一行列数(24 px / 4= > 6 px)。
    四列图片宽度示意

    codepen for display: inline-block method

用Flexbox

上面的解决方案工作很好,但也有一些缺点。为了演示这个缺点,我们假设每个图像都包含一个标题。
更新后的代码如下:

<div>
    <a href="path-to-the-image">
      <figure>
        <img src="path-to-the-image" alt="">
      <figcaption>Some text here</figcaption>
      </figure>
    </a>
    <!-- other anchors here ... -->
</div>

更新后的布局在大屏展示效果如下:

带有标题的图片展示

显而易见,结果不尽人意,因为栅格项目有不同的高度。我们用CSS3中的flexbox可以修复这个问题,它是一种现代CSS设计方法,它将使我们能够解决许多常见的布局问题(如默认inline-block元素)之间的差距。为了展示这个方法,我只需要更新父元素的CSS(flex容器):

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

非常完美!如果我们现在预览画廊,我们会得到预期的结果(即所有列高相等)在所有屏幕。下面是大屏幕上看起来:

Flexbox 布局画廊

CodePen demo using flexbox with improved captions


最后我需要解释一点:Flexbox提供justify-content属性用于沿着flex容器的当前行的主轴对齐flex项目。但是,请注意,此属性不能定义我们要构建所需画廊布局的值。例如,`space-between`值在这个布局中:

space-between

justify-content值为 space-around 结果将为:
space-around

在上面上个例子中,最后两个项目将会很尴尬的两端分散展示。CSS 样式是这样的:

div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* or space-around */
} 

a {
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }
}

在这种情况下,我没有为flex项目分配margin-right属性。这是因为,根据justify-content属性的值,浏览器负责在其容器中自适应分配flex项目。
CodePen demo using the justify-content property

https://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/
http://gridbyexample.com/

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,379评论 1 84
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 1,720评论 0 24
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 467评论 0 0
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 1,425评论 0 5
  • 有好几年 我没有大声的笑出来 有好几年 我没有看过月盈月缺 我一个人默默吃饭 我一个人匆匆走路 再没有哼一首歌 甚...
    抽烟喝酒烫头阅读 24评论 0 1