logo标签列表

类型错误：$(...).masonry 不是一个函数。

jqueryhtmljquery-masonry
13

我想加载一些图片的Masonry视图，但出现了错误：

TypeError: $(...).masonry is not a function

HTML 代码：

<div data-masonry-options="{&quot;columnWidth&quot;: 105, &quot;itemSelector&quot;:&quot;.item&quot;}" class="img-container js-masonry" style="position: relative; height: 381.417px;">
    <div class="item">
        <img src="https://s3.amazonaws.com/clarifai-img/demo/889/88940833.jpg">
    </div>
    <div class="item">
        <img src="https://s3.amazonaws.com/clarifai-img/demo/907/90775901.jpg">
    </div>
    <div class="item">
        <img src="https://s3.amazonaws.com/clarifai-img/demo/294/29489326.jpg">
    </div>
    <div class="item ">
        <img src="https://s3.amazonaws.com/clarifai-img/demo/100/100656385.jpg">
    </div>
    <div class="item ">
        <img src="https://s3.amazonaws.com/clarifai-img/demo/889/88940839.jpg">
    </div>
    <div class="item ">
        <img src="https://s3.amazonaws.com/clarifai-img/demo/111/111773987.jpg">
    </div>
    <div class="item ">
        <img src="https://s3.amazonaws.com/clarifai-img/demo/146/146371016.jpg">
    </div>
    <div class="item">
        <img src="https://s3.amazonaws.com/clarifai-img/demo/103/10313578.jpg">
    </div>
    <div class="item ">
        <img src="https://s3.amazonaws.com/clarifai-img/demo/554/55473337.jpg">
    </div>
    <div class="item ">
        <img src="https://s3.amazonaws.com/clarifai-img/demo/537/53727259.jpg">
    </div>
    <div class="item ">
        <img src="https://s3.amazonaws.com/clarifai-img/demo/111/111246515.jpg">
    </div>
    <div class="item">
        <img src="https://s3.amazonaws.com/clarifai-img/demo/461/46176355.jpg">
    </div>
</div>

jQuery 代码：

<script type='text/javascript'>
$('.grid').masonry({
    // options
    itemSelector: '.grid-item',
    columnWidth: 200
});
var elem = document.querySelector('.grid');
var msnry = new Masonry(elem, {
    // options
    itemSelector: '.grid-item',
    columnWidth: 200
});

// element argument can be a selector string
//   for an individual element
var msnry = new Masonry('.grid', {
    // options
});                         
</script>

我也包括：

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>
2
尝试添加你的代码已准备好的函数。 - Akshay
似乎您没有包含砖石库。 - w3spi
1
<script> $(document).ready(function(){
$('.grid').masonry({
itemSelector: '.grid-item', columnWidth: 200 });

});
</script> 无法工作 - Zisu
@Arif 你有检查过我的 jsFiddle 吗？ - Mr.Happy
请问您能否将 code.jquery.com/jquery-1.11.3.js 移除并替换为这个 jQuery http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js，然后告诉我一声。 - Mr.Happy
显示剩余5条评论
6个回答
9

出现这个错误是因为当您尝试运行内联脚本时，jQuery尚未加载。

这是因为您正在从HTML中内联运行脚本，而同时您又在使用“src”属性引用jQuery。即使您将jQuery引用放在HTML顺序的第一位，浏览器仍会尝试在加载外部jQuery库之前运行内联JavaScript。因此，您会收到错误信息。

您可以轻松地通过以下两种方式解决这个问题：

  1. Putting everything in the inline script tag in a js file

  2. Use vanilla js instead. Add a "masonry-grid" id to the container div, then change the inline script to this:

    <script type='text/javascript'>
var container = document.querySelector('#masonry-grid');
var msnry = new Masonry( container, {
   columnWidth: 200,
   itemSelector: '.item'
});          
</script>

一个很好的JS Masonry入门指南可以在这里找到。

2
天哪，我已经尝试了几个小时才让它工作！似乎除了上面的方法我已经试过所有的东西了！ - FoamyMedia
1
嘿嘿，非常感谢，这是整个互联网上唯一有效的答案。 - Altro
1
你正在对一个带有类名为grid的容器调用瀑布流布局（masonry），但是你没有给该容器添加class="grid"这个类名。
<div data-masonry-options="{'columnWidth': 105, 'itemSelector':'.item'}" class="grid img-container js-masonry">

您不需要转义数据-masonry-options（“），您应该使用当前版本的jQuery（1.11，而不是1.72），并且您不需要像当前代码一样调用三次砌体。只需执行以下操作：

$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});

@Mr.Happy的jsfiddle显示了由于这个问题而导致的以下错误：
[Error] Bad element for masonry: null
Outlayer (masonry.pkgd.js, line 2128)
Layout (masonry.pkgd.js, line 2932)
(anonymous function) (show, line 34)
dispatch (jquery.min.js, line 3)
i (jquery.min.js, line 3)
[Error] Bad element for masonry: .grid
Outlayer (masonry.pkgd.js, line 2128)
Layout (masonry.pkgd.js, line 2932)
(anonymous function) (show, line 42)
dispatch (jquery.min.js, line 3)
i (jquery.min.js, line 3)
仍然有错误 TypeError: $（...）.masonry不是函数但我已经包含了<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script> $('.grid').masonry({ - Zisu
0

我遇到了同样的问题。我通过将脚本引用(script type="text/javascript" src="\masonry.pkgd.min.js")移动到aspx页面的头部来解决它。

0

试试这个。

这是你的一个工作示例，你也可以在jsFiddle上检查：http://jsfiddle.net/mananpatel/6mbhphvj/1/

 $('.grid').masonry({
   // options
   itemSelector: '.grid-item',
   columnWidth: 200
 });
 var elem = document.querySelector('.grid');
 var msnry = new Masonry(elem, {
   // options
   itemSelector: '.grid-item',
   columnWidth: 200
 });

 // element argument can be a selector string
 //   for an individual element
 var msnry = new Masonry('.grid', {
   // options
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>
<div data-masonry-options="{&quot;columnWidth&quot;: 105, &quot;itemSelector&quot;:&quot;.item&quot;}" class="img-container js-masonry" style="position: relative; height: 381.417px;">
  <div class="item">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/889/88940833.jpg">
  </div>
  <div class="item">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/907/90775901.jpg">
  </div>
  <div class="item">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/294/29489326.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/100/100656385.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/889/88940839.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/111/111773987.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/146/146371016.jpg">
  </div>
  <div class="item">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/103/10313578.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/554/55473337.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/537/53727259.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/111/111246515.jpg">
  </div>
  <div class="item">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/461/46176355.jpg">
  </div>
</div>

我复制并粘贴了你的代码，但仍然出错。我已经包含了js代码<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script> 控制台仍然显示错误： TypeError: $(...).masonry不是一个函数。 $('.grid').masonry({ - Zisu
0

解决方案非常简单！包含新的JS 3.5.1库，然后包含jquery-migrate-3.3.1以支持旧功能，在所有这些之后注释掉该行：

//    function initGrid()
//    {
//      setTimeout(function()
//      {
//          $('.grid').masonry(
//          {
//              itemSelector:'.grid-item',
//              columnWidth: 80,
//              gutter: 15
//          });
//     }, 500);

然后你进行初始化：

$(document).ready(function()
{
    //"use strict";
    /* 

    1. Vars and Inits
    */
    var header = $('.header');
    var menuActive = false;
    var menu = $('.menu');
    var burger = $('.hamburger');
    setHeader();
    $(window).on('resize', function()
    {
        setHeader();
    });

    $(document).on('scroll', function()
    {
        setHeader();
    });
    initMenu();
    initHomeSlider();
    initVideo();
    initTopSlider();
    initVidSlider();
    initEventsSlider();
//  initGrid();
    $('.grid').masonry(
    {
        itemSelector:'.grid-item',
        columnWidth: 80,
        gutter: 15
    });
    /*

一切都应该正常工作!! 如果您有任何问题，请在Telegram上与我联系 @Svanolson

0
如果你正在使用ES6的导入语法或者像webpack这样的打包工具，并且想要使用jQuery版本，那么你必须使用jQueryBridget。请参考他们的附加页面上的说明： https://masonry.desandro.com/extras.html#es6 
import jQueryBridget from 'jquery-bridget'
import Masonry from 'masonry-layout/dist/masonry.pkgd'
jQueryBridget( 'masonry', Masonry, $ );
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接