jQuery Masonry渲染“行块”而不是拟合元素

Question

jQuery masonry插件的一个简单用法是将图像放在“块”中，而不是在空白区域中放置元素。该图解释了：

有没有办法解决（或至少最小化）那些“空洞”？

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更容易。 我使用你的结构check it out做了一个例子。 只需关注相对容器＆＃39;插件不要迷路，这很重要。

  

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"
});

希望这有帮助。