jQuery Masonry example

by Alvin Olavarrieta

HTML

<script src="http://rawgithub.com/desandro/masonry/v2.1.08/jquery.masonry.js"></script>
<div id="container">
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div><div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div><div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
    
</div>

CSS

#container {
    border: 1px solid;
    padding: 7px;
}

.item {
    margin: 3px;
    background: #CCC;
}
img {
  width: 100%;
    max-height: 100%;
    min-width: 100%;    
    object-fit: cover;
}

JavaScript

$( function() {
    var $container = $('#container').masonry({
        itemSelector: '.item',
        columnWidth: 250
    });
});