0

我正在尝试使用以下最新说明使用 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 控制台中输出此错误：

未捕获的类型错误：对象 [对象对象] 没有方法“砌体”

知道为什么会这样吗？

编辑：我尝试将呼叫放在 HEAD 以及 BODY 的底部。

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

4

3 回答 3

2

您不能加载砖石，或者您尝试加载它的任何地方都拒绝连接。我之所以这么说是因为这是我在您网站上的控制台会话。

> 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">​&lt;/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">​…​&lt;/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…}
于 2013-08-22T16:18:01.393 回答
1

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

于 2013-08-22T15:48:11.190 回答
0

我也遇到了同样的问题，然后我会像这样使用我的代码，它对我有用

所以你可以试试这个解决方案希望它会起作用

   <script type='text/javascript'>
       jQuery.noConflict();
  (function($) {
            $('#main').masonry({
              itemSelector: '.post-outer',
              isAnimated: true,
              isFitWidth: true
            });
    })(jQuery);
      </script>
于 2013-08-22T16:18:48.347 回答