0

我一直在尝试实现 jQuery Masonry，但它一直无法正常工作。

它出错并在浏览器控制台中显示此内容。

未捕获的类型错误：对象 [object Object] 没有方法“imagesLoaded”

Masonry 在 Vendor/asset/javascripts 中

好的，这是我的文件。

技能.js.coffee：

jQuery ->
  $('#skills_page').imagesLoaded ->
    $('#skills_page').masonry itemSelector: ".box"

index.html.haml

.container
  #skills_page
    = render @skills

= will_paginate @skills

custon.css.scss

.box {
  background-color: #fff;
  width: 214px;
  margin: 5px;
  float: left;
  -webkit-box-shadow: 1px 100px 6px rgba(0, 0, 0, .375);
  -moz-box-shadow: 1px 100px 6px rgba(0,0,0,.375);
  box-shadow: 1px 1px 6px rgba(0, 0, 0, .375);
  display: block;

}
.box img {
    diplay: block;
    width: 100%;

}

.description {
    margin: 10px 0 5px;
}

_skill.html.haml

.box
  .pin_container
    - if skill.image.file?
      .pin_image_bkg= image_tag(skill.image(:long)) 
    - else
      .pin_image_bkg= image_tag "214by70.png"
    - if skill.user.profile_pic.file?
      .pin_image= image_tag(skill.user.profile_pic(:medium), :style => "-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;-webkit-border-bottom-right-radius: 7px;-webkit-border-bottom-left-radius: 7px;-moz-border-radius-bottomright: 7px;-moz-border-radius-bottomleft: 7px;")
    - else
      .pin_image= image_tag("default_avatar.png", :style => "-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;-webkit-border-bottom-right-radius: 7px;-webkit-border-bottom-left-radius: 7px;-moz-border-radius-bottomright: 7px;-moz-border-radius-bottomleft: 7px;")
    .pin_btn= link_to 'View', skill, :class => "btn"
  .pin_subtitle 
    Help Package from
    =link_to "#{skill.user.name}" , skill.user
  .pin_title
    =link_to "#{skill.title}", skill
  .mini_info
    -unless skill.work_hrs.blank?
      .left
        .mini_hours= skill.work_hrs
      .left
        .mini_title W
    -unless skill.meeting_hrs.blank?
      .left
        .mini_hours= skill.meeting_hrs
      .left
        .mini_title M
      .clear

这是您查看页面源代码时我的脚本的样子:)

    <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.masonry.min.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/applications.js?body=1" type="text/javascript"></script>
<script src="/assets/pages.js?body=1" type="text/javascript"></script>
<script src="/assets/password_resets.js?body=1" type="text/javascript"></script>
<script src="/assets/skills.js?body=1"
4

3 回答 3

1

如果 jQuery 工作正常，那么看起来 masonry 插件没有正确加载，因此出现“方法不可用”错误。我在这里拼凑了一个基本的小提琴......没有咖啡脚本，它似乎工作正常。

确保首先包含 jQuery，然后是 Masonry 插件。

JS / jQuery 应该类似于：

$(document).ready(function () {

    var $skills_page = $('#skills_page');

    $skills_page.imagesLoaded(function () {
        $skills_page.masonry({
            // options
            itemSelector: '.box',
            columnWidth: 200
        });
    });

});
于 2013-04-15T20:04:29.947 回答
0

检查您的 application.js 文件

jquery 在那里被调用吗？

您的 application.js 文件（在资产下）应该看起来像这样 http://screencast.com/t/CwM2FRlGaVs

于 2013-04-15T10:56:30.500 回答
0

原来我们的这是一个愚蠢的:)

在我的应用程序布局中，我在底部有这个：

        :plain

      <!-- jQuery via Google + local fallback, see h5bp.com -->

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

      <script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

      <!-- Bootstrap jQuery Plugins, compiled and minified -->

      <script src="js/bootstrap.min.js"></script>    

    :plain

      <script src="http://code.jquery.com/jquery.js"></script>

      <script src="js/bootstrap.min.js"></script>

这打破了一切:)

删除了，一切都很好:)

抱歉问了一个愚蠢的问题！

于 2013-04-18T06:48:11.203 回答