Question

我已尝试将一月Rails教程应用于我的rails 4.1应用程序。虽然它很多都很完美，但关于jQuery Masonry的部分却没有。我已经构建了一个带有博客功能的应用程序，我称之为文章。我已经制作了一篇文章概述页面，我希望以类似Pinterest的方式制作文章概述，所以使用图片，小文本，标题和“阅读更多”按钮，链接到整篇文章。该页面如下所示：

#app/views/articles/overview.html.erb

<div class="jumbotron center">
    <h1>
        Articles
    </h1>
    <p>
        Text.
    </p>
</div>

<div id="articles" class="transitions-enabled">
  <% @articles.each do |article| %>
    <div class="box panel panel-default">
            <h2><%= article.title %></h2>
        <%= link_to article_path(article) do %>
          <%= image_tag article.image_url(:medium).to_s, class: "img-responsive" %>
        <% end %>
        <div class="panel-body">
            <%= article.summary %><br>
        </div>
        <div class="panel-footer">
            <%= link_to 'Read more', article_path(article) %> 
            <% if user_signed_in? %>
             | <%= link_to 'Edit', edit_article_path(article) %> | 
              <%= link_to 'Delete', article, method: :delete, data: { confirm: 'Are you sure?' } %>
            <% end %>
        </div>
    </div>
  <% end %>
</div>

我的布局页面如下所示：

#app/views/layouts/articles.html.erb
<!DOCTYPE html>
<html>
<head>
  <title><%= full_title(yield(:title)) %></title>
  <%= stylesheet_link_tag    "custom", media: "all", "data-turbolinks-track" => true %>

  <%= csrf_meta_tags %>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <%= render 'layouts/header' %>
  <div class="container">
        <% flash.each do |name, msg| %>
          <%= content_tag(:div, msg, class: "alert alert-info") %>
        <% end %>
        <%= yield %>
  </div>
  <%= render 'layouts/footer' %>
</body>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
</html>

我为该页面添加的CSS是：

#app/assets/stylesheets/articles.css.scss

#articles {
  margin: 0 auto;
}

.box {
  margin: 5px;
  width: 250px;
  background: white;
}

.box img {
  width: 100%;
}

我已经包括

* =要求'砌筑/过渡'

在我的application.css文件和

中

// = require masonry / jquery.masonry

在我的application.js文件中。

此外，我的articles.js.coffee文件如下所示：

$ ->
  $('#articles').imagesLoaded ->
    $('#articles').masonry
      itemSelector: '.box',
      isFitWidth: true

另外，我已经通过捆绑器安装了masonry-rails和jquery-turbolinks宝石。

即使它应该有效，它也不会：它不是像pinterest那样显示文章，而是将它们显示在列表中：

enter image description here

此外，Google Chrome会显示以下错误：

“未捕获的TypeError：undefined不是函数”

enter image description here

有谁知道我做错了什么？我当然不是专家，所以我认为这将是一个愚蠢的事情，但我无法弄明白，即使在谷歌搜索了几天并阅读了大量关于它的StackOverflow问题。感谢您提前获得所有帮助!!

Answer 1

确保您的应用程序中包含imagesLoaded脚本。 otherwise它不会工作

https://github.com/desandro/imagesloaded

imageLoaded脚本的链接。

Rails 4.1 jQuery Masonry不起作用

1 个答案: