JQuery Freemasonry rendering "rows of blocks" instead of fitting elements

Question

Simple use of the jQuery masonry plugin puts images in “blocks” instead of matching elements in empty spaces. The figure herself explains:

Is there any way to fix (or at least minimize) these "voids"?

HTML:

<!-- this overlay has height 100%, no scroll and position fixed -->
<div class='overlay-container'>

  <!-- the inner container is "scroll-able": -->
  <div class='row' id='ms-container'>

    <!-- masonry items... -->
    <div class='col-md-4 ms-item'>
      <div class='boxcontainer'>
        <img src="photo.png" />
        <h1>
          <a href='#'>
            activity_2
          </a>
        </h1>
      </div>
    </div>
   <!-- more items... -->

  </div>
</div>

JavaScript:

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

    $container.imagesLoaded(function() {
    $container.masonry({

        itemSelector: '.ms-item',
        columnWidth: '.ms-item',
        transitionDuration: 0.4

    });

    });

CSS

.overlay-container {
    height: 100% !important; 
    position: absolute;
    top:0px;
    width: 58%;
    left: 30px;
    padding: 50px 10px 10px 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.boxcontainer {
    border:1px solid #ededed;
    background:#fff;
    font-size:13px;
    text-align:center;
    transition:border 500ms ease-out;
    border-bottom:medium double #ddd;
    position:relative;
    overflow:hidden;
}

Answer 1

​​ bootstrap 3, . Isotope, . , , . " ", , .

HTML

<!-- this overlay has height 100%, no scroll and position fixed -->
<div class='overlay-container'>
  <div class="relative">
    <!-- the inner container is "scroll-able": -->
    <div class='row' id='ms-container'>

      <!-- masonry items... -->
      <div class='col-md-4 ms-item'>
        <div class='boxcontainer'>
          <img src="http://placehold.it/300x500" />
          <h1>
            <a href='#'>
              activity_2
            </a>
          </h1>
        </div>
      </div>

     <!-- more items... -->

    </div>

  </div>
</div>

CSS

.overlay-container {
    height: 100% !important; 
    position: absolute;
    top:0px;
    width: 58%;
    left: 30px;
    padding: 50px 10px 10px 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.boxcontainer {
    border:1px solid #ededed;
    background:#fff;
    font-size:13px;
    text-align:center;
    transition:border 500ms ease-out;
    border-bottom:medium double #ddd;
    position:relative;
    overflow:hidden;
}

.relative { position:relative; }

JavaScript

$("#ms-container.row").isotope({
    masonry: {
        columnWidth: ".col-md-4"
    },
    itemSelector: ".ms-item",
    percentPosition: !0,
    layoutMode: "masonry"
});

, .