带引导面板的砌体布局

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

也许有人能告诉我为什么会这样？感谢

所以我将网格 class 移动到网格 ID，这是我得到的结果。原来所有的面板都叠成了一个。

Answer 1

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

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

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

您似乎没有使用 jQuery，因此您需要使用 Masonry 的原版 JavaScript 初始化：

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

带引导面板的砌体布局

Masonry layout with bootstraps panel

html

css

jquery

masonry