Pinterest可以说是瀑布流网站布局的鼻祖。瀑布流布局以其直观简洁而备受图片类网站的青睐。Pinterest使用js来制作这种布局，我们今天想用纯CSS来完成这种瀑布流列布局。
HTML结构
这个瀑布流布局的HTML结构我们将用HTML5的<figure>元素来制作。
<div id="columns">
<figure>
<img src="cinderella.jpg" alt>
<figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
</figure>
<figure>
<img src="rapunzel.jpg" alt>
<figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
</figure>
…
</div>
CSS样式
CSS3的多列布局非常适合于制作这个效果（注意：下面的代码没有使用浏览器厂商的前缀）。
#columns {
column-width: 320px;
column-gap: 15px;
width: 90%;
max-width: 1100px;
margin: 50px auto;
}
给每一列设置固定的宽度能使这个瀑布流布局的响应式效果更好。浏览器在每次渲染时都会计算一行能够放多少列320像素的单列。
<figure>元素和它里面的图片的CSS样式非常简单：
div#columns figure {
background: #fefefe;
border: 2px solid #fcfcfc;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 0 2px 15px;
padding: 15px; padding-bottom: 10px;
transition: opacity .4s ease-in-out;
column-break-inside: avoid;
display: inline-block;
}
div#columns figure img {
width: 100%; height: auto;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}
column-break-inside: avoid;属性强制<figure>元素内部不能产生断行，目前还没有浏览器完全支持这个属性。处于回退的原因，我们添加了一行display: inline-block。
最后，我们使用:not伪类选择器来制作鼠标滑过图片的效果。前面已经为每个<figure>元素都添加了透明度的transition：
div#columns:hover figure:not(:hover) { opacity: 0.4; }
上面这局代码通俗的来说，意思是：如果用户用鼠标滑过容器时，除了用户直接用鼠标滑过或悬停的那个figure元素之外，其它的figure元素的透明度为0.4。
注意：webkit内核的浏览器在
multi-column布局中进行交换时有一个众所周知的bug，这个bug在本文的例子中尤为明显，所以代码中去除了Chrome 和 Safari的rollover过渡效果。对移动设备的支持
最后，我们通过@media query来设置对小屏幕设备的支持：
@media screen and (max-width: 750px) {
#columns { column-gap: 0px; }
#columns figure { width: 100%; }
}
小结
这个瀑布流布局同样可以使用flexbox来完成，唯一的条件是外部的容器必须有一个明确的高度，另外，里面的图片必须在一个不间断的单列中。
上面的HTML代码有许多重复的地方：多个<fugure>和<figcaption>。这个问题可以使用js来动态生成所需的HTML结构来解决。
