页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，不难看出其实就是ul标签组成的多个图片列表，代码如下：

<header class="hero">
  <h1>4种效果的图片相册</h1>
  <p>点击每一个查看效果</p>
</header>
<ul class="cards">
  <li class="title">
    <h2>向右扩展</h2>
  </li>
  <li class="card card-1"><img src="http://lorempixel.com/400/250/city"/>
    <div class="content">
      <h1>图片标题</h1>
      <p>图片描述</p>
    </div>
  </li>
  <li class="card card-2"><img src="http://lorempixel.com/400/250/food"/>
    <div class="content">
      <h1>图片标题</h1>
      <p>图片描述</p>
    </div>
  </li>
  <li class="card card-3"><img src="http://lorempixel.com/400/250/animals"/>
    <div class="content">
      <h1>图片标题</h1>
      <p>图片描述</p>
    </div>
  </li>
</ul>
<hr/>
<ul class="card-stacks">
  <li class="title">
    <h2>展开为网格布局</h2>
  </li>
  <li class="stack stack-1">
    <ul class="cards-down">
      <li class="card card-1"><img src="http://lorempixel.com/401/250/city"/>
        <div class="content">
          <h1>图片标题</h1>
          <p>图片描述</p>
        </div>
      </li>
      <li class="card card-2"><img src="http://lorempixel.com/401/250/food"/>
        <div class="content">
          <h1>图片标题</h1>
          <p>图片描述</p>
        </div>
      </li>
      <li class="card card-3"><img src="http://lorempixel.com/401/250/animals"/>
        <div class="content">
          <h1>图片标题</h1>
          <p>图片描述</p>
        </div>
      </li>
    </ul>
  </li>
  <li class="stack stack-2">
    <ul class="cards-down">
      <li class="card card-1"><img src="http://lorempixel.com/402/250/city"/>
        <div class="content">
          <h1>图片标题</h1>
          <p>图片描述</p>
        </div>
      </li>
      <li class="card card-2"><img src="http://lorempixel.com/402/250/food"/>
        <div class="content">
          <h1>图片标题</h1>
          <p>图片描述</p>
        </div>
      </li>
      <li class="card card-3"><img src="http://lorempixel.com/402/250/animals"/>
        <div class="content">
          <h1>图片标题</h1>
          <p>图片描述</p>
        </div>
      </li>
    </ul>
  </li>
  <li class="stack stack-3">
    <ul class="cards-down">
      <li class="card card-1"><img src="http://lorempixel.com/403/250/city"/>
        <div class="content">
          <h1>图片标题</h1>
          <p>图片描述</p>
        </div>
      </li>
      <li class="card card-2"><img src="http://lorempixel.com/403/250/food"/>
        <div class="content">
          <h1>图片标题</h1>
          <p>图片描述</p>
        </div>
      </li>
      <li class="card card-3"><img src="http://lorempixel.com/403/250/animals"/>
        <div class="content">
          <h1>图片标题</h1>
          <p>图片描述</p>
        </div>
      </li>
    </ul>
  </li>
</ul>
<hr/>
<ul class="cards-split">
  <li class="title">
    <h2>从中间分开</h2>
  </li>
  <li class="card card-1"><img src="http://lorempixel.com/400/250/city"/>
    <div class="content">
      <h1>图片标题</h1>
      <p>图片描述</p>
    </div>
  </li>
  <li class="card card-2"><img src="http://lorempixel.com/400/250/food"/>
    <div class="content">
      <h1>图片标题</h1>
      <p>图片描述</p>
    </div>
  </li>
  <li class="card card-3"><img src="http://lorempixel.com/400/250/animals"/>
    <div class="content">
      <h1>图片标题</h1>
      <p>图片描述</p>
    </div>
  </li>
</ul>
<hr/>
<ul class="cards-split-delay">
  <li class="title">
    <h2>从中间缓慢分开</h2>
  </li>
  <li class="card card-1"><img src="http://lorempixel.com/400/250/city"/>
    <div class="content">
      <h1>图片标题</h1>
      <p>图片描述</p>
    </div>
  </li>
  <li class="card card-2"><img src="http://lorempixel.com/400/250/food"/>
    <div class="content">
      <h1>图片标题</h1>
      <p>图片描述</p>
    </div>
  </li>
  <li class="card card-3"><img src="http://lorempixel.com/400/250/animals"/>
    <div class="content">
      <h1>图片标题</h1>
      <p>图片描述</p>
    </div>
  </li>
</ul>

页面的底部，需远程调用jQuery库，并引入本地的JS文件，代码如下：

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>