jQuery Masonry 呈现 "row blocks"而不是拟合元素

Question

jQuery masonry 插件的一个简单用法是将图像放置在“ block ”中，而不是在空白处放置元素。该图自行解释:

有没有办法修复(或至少最小化)这些“空洞”？

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 . 请注意“相对容器”中的插件不要丢失很重要。

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

希望这对您有所帮助。