jquery - 带引导面板的 masonry 布局

Question

这里有人擅长使用 Bootstrap 的 MasonryJs 吗？

我遇到了这个问题:

这是我目前的情况

<div class="row" id="grid">
<div class="col-md-6 item">
<div class="panel panel-default>
.....
</div>
</div>
</div>

$("#grid").masonry({
 itemSelector: '.item',
 columnWidth: '.item'
});

也许有人可以告诉我为什么会这样？谢谢

---

所以我将网格类移动到网格 ID，这是我得到的结果。事实证明，所有面板都堆叠在一起。

Answer 1

这是您正在使用的 Masonry 初始化代码，来自问题:

$("#grid").masonry({
 itemSelector: '.item',
 columnWidth: '.item'
});

这是将 Masonry 与 jQuery 结合使用的初始代码段。

您似乎没有使用 jQuery，因此您需要为 Masonry 使用 vanilla JavaScript init:

var elem = document.querySelector("#grid");
var masonry = new Masonry(elem, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-item'
});