photo.html

---
layout: default
title: "影集"
permalink: photo.html
sequence: 5
---

<style>
  .container { width: initial; }
  .content { max-width: initial; }
  .grid::after {
    content: '';
    display: block;
    clear: both;
  }
  .grid-item {
    float: left;
    width: 250px;
    margin-bottom: 10px;
  }
  .grid-size {
    width: 250px;
  }
  @media (max-width: 48em) {
    .grid-item,
    .grid-size {
      width: calc(50% - 10px);
    }
  }
  .grid-item a {
    display: block;
    width: 100%;
  }
  .grid-item img {
    margin: 0;
    transition: .3s ease;
  }
  .grid-item a:hover {
    border-bottom: none;
  }
  /* view.js */
  .viewer li {
    -webkit-transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    -moz-transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  }
  .viewer .caption {
    visibility: hidden;
    opacity: 0;
    line-height: 50px;
    font-size: 0.8rem;
    -webkit-transition: opacity 1.5s ease-in-out;
    -moz-transition: opacity 1.5s ease-in-out;
    transition: opacity 1.5s ease-in-out;
  }
  .viewer .current .caption {
    opacity: 100;
    visibility: visible;
  }
  .viewer li > div {
    top:20px;
    bottom:20px;
    left:0;
    right:0;
  }
  .viewer li.has-caption > div {
    bottom:50px;
  }
  .viewer span > img {
    display: inline;
  }

</style>

<div class="page">
  <h1 class="page-title">影集</h1>
  <div class="grid">
    <div class="grid-size"></div>
    <!-- Add new photo from here -->
    <div class="grid-item">
      <a class="view" href="https://infp.github.io/photos/9.jpg" title="新生" rel="vsco">
        <img src="https://infp.github.io/photos/9.jpg">
      </a>
    </div>
    <div class="grid-item">
      <a class="view" href="https://infp.github.io/photos/8.jpg" title="西单路口" rel="vsco">
        <img src="https://infp.github.io/photos/8.jpg">
      </a>
    </div>
    <div class="grid-item">
      <a class="view" href="https://infp.github.io/photos/7.jpg" title="牛牛" rel="vsco">
        <img src="https://infp.github.io/photos/7.jpg">
      </a>
    </div>
    <div class="grid-item">
      <a class="view" href="https://infp.github.io/photos/6.jpg" title="人民公园" rel="vsco">
        <img src="https://infp.github.io/photos/6.jpg">
      </a>
    </div>
    <div class="grid-item">
      <a class="view" href="https://infp.github.io/photos/5.jpg" title="花，摄于忻州" rel="vsco">
        <img src="https://infp.github.io/photos/5.jpg">
      </a>
    </div>
    <div class="grid-item">
      <a class="view" href="https://infp.github.io/photos/4.jpg" title="景中景，摄于北京" rel="vsco">
        <img src="https://infp.github.io/photos/4.jpg">
      </a>
    </div>
    <div class="grid-item">
      <a class="view" href="https://infp.github.io/photos/3.jpg" title="春天" rel="vsco">
        <img src="https://infp.github.io/photos/3.jpg">
      </a>
    </div>
    <div class="grid-item">
      <a class="view" href="https://infp.github.io/photos/2.jpg" title="玉渊潭公园" rel="vsco">
        <img src="https://infp.github.io/photos/2.jpg">
      </a>
    </div>
    <div class="grid-item">
      <a class="view" href="https://infp.github.io/photos/1.jpg" title="烤鱿鱼，摄于枫蓝国际" rel="vsco">
        <img src="https://infp.github.io/photos/1.jpg">
      </a>
    </div>
  </div>
</div>

<script src="{{site.baseurl}}/public/js/masonry.pkgd.min.js"></script>
<script src="{{site.baseurl}}/public/js/imagesloaded.pkgd.min.js"></script>
<script src="{{site.baseurl}}/public/js/view.min.js?auto"></script>
<script>
  var grid = document.querySelector('.grid');

  var msnry = new Masonry(grid, {
    itemSelector: '.grid-item',
    columnWidth: '.grid-size',
    gutter: 10
  });

  imagesLoaded(grid).on('progress', function() {
    msnry.layout();
  });
</script>