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

时间:2017-09-13 08:15:59

标签: javascript jquery masonry

我想使用masonry plugin by Dave DeSandro来构建网站。作为第一步,为了了解它是如何工作的,我尝试在砌体页面上重新创建其中一个演示,this one.

不幸的是,重新创建它不起作用,div的布局没有按预期工作。但我不明白为什么,这是我试图重新创建演示所显示的内容的一个方面:

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

1 个答案:

答案 0 :(得分: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>