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

Question

I would like to use the 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.

Unfortunately, recreating it did not work, the layout of the divs is not working as intended. But I don't understand why, here's a jsfiddle of my attempt to recreate exactly what the demo shows:

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

Can someone point out the mistake to me? I believe it has something to do with me not initialising the plugin properly with jquery?

I am trying to initialise the plugin just as it is mentioned in 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
})

UPDATE:

I'm slightly more confused, now that recreating it on codepen worked perfectly well https://codepen.io/anon/pen/JrjmRa

Answer 1

you have to first load the jquery, then the masnry plugin. see the update here 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>