jQuery：正确初始化砌体插件？

Question

我想使用Dave DeSandro的砌体插件来构建站点。 第一步，为了学习其工作原理，我尝试在砖石页面上重新创建一个演示。

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

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

有人可以向我指出错误吗？ 我相信这与我没有正确使用jquery初始化插件有关吗？

我正在尝试初始化插件，就像在演示文档中提到的那样：

$('.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>