jQuery Masonry不适用于不同的高度div

Question

我在我的rails应用程序中有一组模板，我想显示它jquery mansory样式。我参考了这个教程：http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout。

我的代码是：

<div id="wrapper-temp">
<div id="list-temp">
        <div class="template">temp1
    </div>
        <div class="template">temp1
    </div>
        <div class="template">temp1
    </div>
        <div class="template">temp1
    </div>
        <div class="template">temp1
    </div>
   </div>
</div>

我的css：

 #wrapper-temp
 {
  max-width: 60em; /* 960 px */
  margin: 0 auto;
 }
 #list-temp
 {
    width: 103.125%; /* 990px */
    overflow: hidden;
    margin-left: -1.562%; /* 15px */
    margin-bottom: -1.875em; /* 30px */
 }
 .template
 {
   padding: 25px;
   width: 30.303%; /* 300px */
   float: left;
   margin: 0 1.515% 1.875em; /* 15px 30px */
   color: #eee;
   background: #ff98a1; 
 }
 @media only screen and ( max-width: 40em ) /* 640px */
 {
  .template
  {
    width: 46.876%; /* 305px */
    margin-bottom: 0.938em; /* 15px */
  }
 }
 @media only screen and ( max-width: 20em ) /* 640px */
 {
  #list-temp
  {
    width: 100%;
    margin-left: 0;
  }
    .template
    {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
 }

我的application.js包含：

  $(document).ready(function() {

  $( window ).load( function()
  {
   var columns    = 3,
    setColumns = function() { columns = $( window ).width() > 640 ? 3 : $( window ).width() > 320 ? 2 : 1; };

   setColumns();
   $( window ).resize( setColumns );

   $( '#list-temp' ).masonry(
   {
    itemSelector: '.template',
    columnWidth:  function( containerWidth ) { return containerWidth / columns; }
   });
  });
 });

这就是这样的o / p（行div之间的空格）：

但是我想要这样的o / p（没有白色花苞或用下一个div填充空白区域）

如果有人能说出这里出了什么问题，真的很感谢你的帮助吗？感谢。