制作图片磁贴

这个例子是用flexbox实现的一个磁贴式图片布局。实现起来很简单。

<div id="masonry">
        <img src="irina.jpg" alt>
        <img src="daniella.jpg" alt>
        <img src="karina.jpg" alt>
        …
    </div>

CSS也非常简单，在样式表中，我没有使用Chrome与FireFox内核特定的前缀，flexbox在这两者中都是可以免前缀的。（但是在 IE 中不可以）

div#masonry {
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vw;
    font-size: 0;
}

div#masonry img {
    width: 33.3%;
    transition: .8s opacity;
    max-height: 0; //chrome v48 会有 flex 下 img 的 height 不能按比例放缩的 BUG
}

div#masonry:hover img {
    opacity: 0.3;
}

div#masonry:hover img:hover {
    opacity: 1;
}

在这段代码中有一处要点：是对个DIV容器(#masonry)高度的设定。 如果没有这个限制，这些图片就会以一个单纯的不换行垂直列的形式显示，从而忽视了 flex-wrap 的属性。

针对 Firefox 的绛级处理

对于那些还没有升级到最新 Firefox 的用户，我在样式表的最后多加了一项CSS规则

@supports not (flex-wrap: wrap) {
    div#masonry {
        display: block;
    }
    div#masonry img {
        display: inline-block;
        vertical-align: top;
    }
}

这是一个特征查询的代码块。@supports语法会使一个网页对当前浏览器支持哪些 CSS 属性或特性作出一个判断。 就像@media 媒体查询一样，可以让我们检查当前视窗的宽高与分辨率。 到现在，@supports 让我们可以在纯 CSS 中实现对浏览器的回退绛级处理，替代了许多对特性与兼容性检测的javascript脚本。

现在，@supports仅在Firefox、Chrome和最新版的Android浏览器中有效(写这篇文章时是4.4)。 好吧，估计又有人问到 IE 的情况了，IE10也是支持的， IE9及其更早的版本可以将单独针对这个问题的样式(表) 写在一个特有的条件注释中。 但是在早期的 Firefox 中会出现一个问题：它支持display: flex但不支持flex-wrap，视觉上简直是一种“科学怪物”。

对于 Firefox 27 及更早期的浏览器，我们可以将容器中的display: flex去掉，对每个 img 加上 display:inline-block的属性。 这样的结果会有些不同，常会在纵向图之间出现垂直的间隙，但这也比其它的好点。

移动端的支持

在移动端改变成两列布局以保证图片的显示效果也是很简单的：

@media screen and (max-width: 500px) {
    div#masonry {
        height: 200vw;
    }
    div#masonry img {
        width: 50%;
    }
}

总结

就像你看到的，flexbox可以让我们方便的制作出磁贴式或Pinterest-Style风格的布局。 当然，还有一种比“可换行flex元素”更好的解决方案，过些日子给大家展示。