jquery: 正确初始化砌体插件？

Question

我想使用 masonry plugin by Dave DeSandro for the construction of a site. As a first step, in order to learn how it works, I tried recreating one of the demos on the masonry page, this one.

不幸的是，重新创建它没有用，div 的布局没有按预期工作。但我不明白为什么，这是我尝试重新创建演示所显示内容的 jsfiddle：

https://jsfiddle.net/johschmoll/L1L2kgkz/2/

有人可以指出错误吗？我相信这与我没有使用 jquery?

正确初始化插件有关

我正在尝试初始化插件，就像 the documentation of the demo 中提到的那样：

$('.grid').masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  // use element for option
  columnWidth: '.grid-sizer',
  percentPosition: true
})

更新：

我有点困惑，现在在 codepen 上重新创建它非常好https://codepen.io/anon/pen/JrjmRa

Answer 1

您必须先加载 jquery，然后再加载 masnry 插件。在此处查看更新 jsfiddle

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://masonry.desandro.com/masonry.pkgd.js"></script>

jquery: 正确初始化砌体插件？

jquery: Initialising masonry plugin properly?

javascript

jquery

masonry