Pinterest like layouts are still popular and work well really well for rich assets like images and videos. If you would like to create your own masonry layout, here's a quick demo using Embedly oEmbed API and Masonry.

The flow is pretty simple, grab the oEmbed data for each URL, create the grid and then call Masonry. Here's the code!

// The URLs that you want to embed.
var urls = [
  'https://vimeo.com/158773447',
  'https://www.instagram.com/p/BCizMYGoXYG/',
  'https://www.youtube.com/watch?v=sGbxmsDFVnE',
  'https://vine.co/v/ijlT6naE6lT',
  'https://www.flickr.com/photos/snowyturner/26230731605/in/explore-2016-04-04/',
  'http://www.theverge.com/2016/3/1/11138904/aston-martin-db11-announced-geneva-motor-show-2016',
]

$grid = $('.grid');

// Use jQuery Embedly to make the API Calls.
$.embedly.oembed(urls, {
    key: '1d5c48f7edc34c54bdae4c37b681ea2b' // replace with your API KEY.
  })
  .then(function(oembeds) {
  	// Iterate over the results and add them to the grid.
    oembeds.forEach(function(oembed) {
      var $item = $('<div class="grid-item"></div>');
      // Video Types.
      if (oembed.type === 'video' || oembed.type === 'rich') {
        // Makes the video responsive.
        $resp = $('<div class="resp-media"></div>');
        var ratio = ((oembed.height / oembed.width) * 100).toPrecision(4) + '%'
        $resp.css({
          paddingBottom: ratio
        });
				
        // Add it to and item.
        $resp.html(oembed.html);
        $item.append($resp);
      } else if (oembed.type === 'photo') { // Images
        $item.html('<img src="' + oembed.url + '"/>');
      } else if (oembed.type === 'link') {
        $item.html([
          '<img src="' + oembed.thumbnail_url + '"/>',
          '<h4>' + oembed.title + '</h4>',
          '<p>' + oembed.description + '</p>'
        ].join(''));
      } else {
      	// error case.
        return false;
      }
      // Add the item to the grid.
      $grid.append($item);
    });
  })
  .then(function() {
  	// tell masonry to do it's thing.
    $grid.masonry({
      itemSelector: '.grid-item',
      columnWidth: 300
    });
    // layout Masonry after each image loads
    $grid.imagesLoaded().progress( function() {
      $grid.masonry('layout');
    });
  });

Make sure you include imagesLoaded otherwise you will get overlapping issues with images.