A CodePen by David DeSandro. Beyonce Seamless Masonry Technique - As designed by designedmemory See iam.beyonce.com

index.html

<header>
  <h1>Beyonce Seamless Masonry Technique</h1>
  <p>As designed  by <a href="http://www.designedmemory.com/">designedmemory</a></p>
  <p>See <a href="http://iam.beyonce.com/">iam.beyonce.com</a></p>
</header>

<div id="container">
  <div class="item"><img src="http://placekitten.com/300/350" /></div>
  <div class="item"><img src="http://placekitten.com/300/300" /></div>
  <div class="item"><img src="http://placekitten.com/300/450" /></div>
  <div class="item"><img src="http://placekitten.com/300/200" /></div>
  <div class="item"><img src="http://placekitten.com/300/250" /></div>
  <div class="item"><img src="http://placekitten.com/300/400" /></div>
  <div class="item"><img src="http://placekitten.com/300/200" /></div>
  <div class="item"><img src="http://placekitten.com/300/350" /></div>
  <div class="item"><img src="http://placekitten.com/300/300" /></div>
  <div class="item"><img src="http://placekitten.com/300/450" /></div>
  <div class="item"><img src="http://placekitten.com/300/200" /></div>
  <div class="item"><img src="http://placekitten.com/300/250" /></div>
  <div class="item"><img src="http://placekitten.com/300/400" /></div>
  <div class="item"><img src="http://placekitten.com/300/200" /></div>
  <div class="item"><img src="http://placekitten.com/300/200" /></div>
  <div class="item"><img src="http://placekitten.com/300/350" /></div>
  <div class="item"><img src="http://placekitten.com/300/300" /></div>
  <div class="item"><img src="http://placekitten.com/300/450" /></div>
  <div class="item"><img src="http://placekitten.com/300/200" /></div>
  <div class="item"><img src="http://placekitten.com/300/250" /></div>
  <div class="item"><img src="http://placekitten.com/300/400" /></div>
</div>

script.js

$( function() {

  var $container = $('#container');

  $container.imagesLoaded( function() {
    $container.masonry({
      columnWidth: function( containerWidth ) {
        return containerWidth / 3
      }
    });
  });
  
});

style.css

/* force vertical scrollbar */
html {
  overflow-y: scroll;
}

body {
  margin: 0;
  font-family: sans-serif;
}

header {
  width: 220px;
  margin: 10px;
  position: absolute;
  left: 0;
  top: 0;
}

#container {
  margin-left: 240px;
  background: black;
}

/* items are not quite 1/3 wide */
.item {
  width: 33.2%;
  float: left;
}

/* images cover up the gap */
.item img {
  display: block;
  width: 100.5%;
}

/**** Transitions for Masonry ****/

.masonry,
.masonry .masonry-brick {
  -webkit-transition-duration: 0.4s;
     -moz-transition-duration: 0.4s;
      -ms-transition-duration: 0.4s;
       -o-transition-duration: 0.4s;
          transition-duration: 0.4s;
}

.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}