Question

我一直在尝试在我的rails应用程序中实现Bootstrap主题（Megakit）（http://keenthemes.com/preview/megakit/）。

现在我一直在使用基本方法：将HTML / CSS / SCSS复制到正确的文件夹中。

网站的大部分内容都很棒，但我遇到了Mansonry的问题，而且我真的不明白会发生什么（Javascript不是我的强项）。

 masonry.self-f70335ff283115f92d456ed8fba03b11890ff509c5c5964a0ab3207c7183f53a.js?body=1:44 
Uncaught TypeError: Masonry.init is not a function
        at HTMLDocument.<anonymous> (masonry.self-f70335ff283115f92d456ed8fba03b11890ff509c5c5964a0ab3207c7183f53a.js?body=1:44)
        at fire (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3233)
        at Object.fireWith [as resolveWith] (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3363)
        at Function.ready (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3583)
        at HTMLDocument.completed (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3618)

这对我没有任何意义，因为我基本上只是从文件夹中复制了文件并且它在那里工作。

我的masonry.js文件（不是供应商），它显然无效。

// Masonry
var Masonry = function() {
  'use strict';

  // Handle Masonry
  var handleMasonry = function() {
    var $container = $('.js__masonry');
    // initialize Masonry after all images have loaded
    $container.imagesLoaded( function() {
      $container.masonry({
        itemSelector: '.js__masonry-item', // use a separate class for itemSelector, other than .col-
        columnWidth: '.js__masonry-sizer',
        percentPosition: true
      });
    });
    $.fn.masonryImagesReveal = function( $items ) {
      var msnry = this.data('masonry');
      var itemSelector = msnry.options.itemSelector;
      // hide by default
      $items.hide();
      // append to container
      this.append( $items );
      $items.imagesLoaded().progress( function( imgLoad, image ) {
        // get item
        // image is imagesLoaded class, not <img>, <img> is image.img
        var $item = $( image.img ).parents( itemSelector );
        // un-hide item
        $item.show();
        // masonry does its thing
        msnry.appended( $item );
      });
      return this;
    };
  }

  return {
    init: function() {
      handleMasonry(); // initial setup for Masonry
    }
  }
}();

$(document).ready(function() {
  Masonry.init();
});

你能告诉我可能发生的事吗？谢谢，

安东尼

Answer 1

我不知道它是否纯粹的运气，但是我通过更改Masonry.init来解决它：

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

希望有所帮助

未捕获的TypeError：Masonry.init不是函数

1 个答案: