css画廊效果图,现代CSS 实现照片画廊布局

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

响应式布局Responsive Layout

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

大屏显示效果

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

较小屏幕显示效果

这个标签简单写成

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

我想要在中等屏幕上和较小屏幕(例如<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

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

更新后的代码如下：

Some text here

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

带有标题的图片展示

显而易见，结果不尽人意,因为栅格项目有不同的高度。我们用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