与bootstraps面板的砌体布局

Question

这里的任何人都跟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'
});

这是使用Mason和jQuery的初始代码段。

您似乎没有使用jQuery，因此您需要使用vanilla JavaScript init进行Masonry：

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