问引导时间模板-删除空白

EN

<section class="grid-container">
  <div class="grid">
    <a href="#"><div class="item i1">
     <span class="date">2015</span>
     <p class="title">Content</p>
    </a>
  </div>
</section>

html, body {
  background: #333;
  font-family: Helvetica;
}

.grid-container {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.toggle {
  text-align: center;
  padding: 0;
  color: white;
}

.toggle li {
  display: inline;
  padding: 0 60px;
}

.toggle label {
  font-size: 1.2em;
  padding: 0 10px;
}

.grid {
  margin: 0 auto;
}

.item {
  color: white;
  display: table;
  font-size: 1.4em;
  text-align: center;
  margin: 5px;
  width: 450px;
}

.item:hover .title {
  opacity: 1;
}

.title {
  display: table-cell;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
}

.i1, .i3, .i6, .i7  {
  background: #2ecc71;
  height: 280px;
}

.i2, .i4, .i5, .i8 {
  background: #e74c3c;
  height: 180px;
}

.i9, .i10, .i11, .i12, .i13, .i14, .i15 {
  background: #e74c3c;
  height: 180px;
}

.i4 {
  height: 349px;
}

.expand {
  transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
  -webkit-transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
  height: 100%;
  width: 100%;
  left: 0 !important;
  top: 0 !important;
  z-index: 99;
  text-indent: -9999px;
}

.date {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  border-radius: 50%;
  height: 75px;
  width: 75px;
  color: #000;
  display: block;
  line-height: 3.7;
  font-size: 20px
}

jQuery(document).ready(function ($) {

  var $container = $('.grid').masonry({
    columnWidth: 10,
    itemSelector: '.item',
    isFitWidth: true
  });

  var arrGreen = new Array($('.i1'),$('.i3'),$('.i6'),$('.i7'));
  var arrRed = new Array($('.i2'),$('.i4'),$('.i5'),$('.i8'), $('.i9'),$('.i10'),$('.i11'),$('.i12'), $('.i13'),$('.i14'),$('.i15'));

  $('input').click(function () {
    $('.item').removeClass('expand');

    if ($('.green').is(':checked')) {
      $container.masonry('hide', arrRed);
      $(arrGreen).each(function (index, element) {
        element.show();
      });
      $container.masonry();
    } else if ($('.red').is(':checked')) {
      $container.masonry('hide', arrGreen);
      $(arrRed).each(function (index, element) {
        element.show();
      });
      $container.masonry();
    } else if ($('.all').is(':checked')) {
      $(arrGreen).each(function (index, element) {
        element.show();
      });
      $(arrRed).each(function (index, element) {
        element.show();
      });
      $container.masonry();
    }
  });

  $('.item').click(function () {
    $(this).toggleClass('expand');
  });

});