当前位置主页 > 资料库 > 前端教程 > 使用纯CSS制作Pinterest样式的瀑布流图片列布局

使用纯CSS制作Pinterest样式的瀑布流图片列布局

2015-03-09

查看演示 下载地址

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。

对移动设备的支持

最后,我们通过@media query来设置对小屏幕设备的支持:

@media screen and (max-width: 750px) {
  #columns { column-gap: 0px; }
  #columns figure { width: 100%; }
}                              
                            
小结

这个瀑布流布局同样可以使用flexbox来完成,唯一的条件是外部的容器必须有一个明确的高度,另外,里面的图片必须在一个不间断的单列中。

上面的HTML代码有许多重复的地方:多个<fugure><figcaption>。这个问题可以使用js来动态生成所需的HTML结构来解决。

查看演示 下载地址

Previous:
上一篇:CSS3带动态阴影效果的3D图片翻转特效
Next:
下一篇:使用CSS3帧动画制作逼真的计数器动画特效
返回顶部