Question

我正在尝试使用jQuery使用最新的说明来处理jQuery：http://masonry.desandro.com/options.html

我在调用之前已经包含了js文件。电话看起来像这样：

 <script type='text/javascript'>
    $(document).ready(function() {
        $('#main').masonry({
          itemSelector: '.post-outer',
          isAnimated: true,
          isFitWidth: true
        });
    });
  </script>

它不起作用并在我的Chrome控制台中输出此错误：

未捕获的TypeError：对象[object Object]没有方法'masonry'

知道为什么会这样吗？

编辑：我已经尝试将呼叫置于HEAD以及BODY的底部。

EDIT2：我尝试了普通的javascript调用，而不是jQuery调用。我的控制台中的错误现在表明没有定义砌体。据我所知，虽然......

Answer 1

您不能加载砌体，或者无论您何时尝试加载它都是拒绝连接。我之所以这么说是因为这是我网站上的控制台会话。

> var masonry = new Masonry ( '#main' )
ReferenceError: Masonry is not defined // this tells me its not loaded
> var script = document.createElement("script"); // let's inject it
undefined
> script.type = "text/javascript";
"text/javascript"
> script.src = "//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.1/masonry.pkgd.js"
"//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.1/masonry.pkgd.js"
> document.getElementsByTagName("head")[0].appendChild( script )
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.1/masonry.pkgd.js"></script>
> masonry
ReferenceError: masonry is not defined
> var masonry = new Masonry()
Bad masonry element: undefined masonry.pkgd.js:1621 // woohoo, we can tell it's loaded now
undefined
> var container = document.querySelector('#main');
undefined
> container
<div class="main section" id="main">…</div>
> var masonry = new Masonry( container )
undefined
> masonry
// and we have it!
Layout {element: div#main.main section, options: Object, items: Array[1], stamps: Array[0], isResizeBound: true…}

Answer 2

应该在砌体之前加载jQuery脚本标记。

Answer 3

同样的问题随我而来，我会像这样使用我的代码，它适用于我

所以你可以试试这个解决方案，希望它能运作

   <script type='text/javascript'>
       jQuery.noConflict();
  (function($) {
            $('#main').masonry({
              itemSelector: '.post-outer',
              isAnimated: true,
              isFitWidth: true
            });
    })(jQuery);
      </script>

没有方法砌体

3 个答案: