0

Masonry Web サイトのファイルと masonry-rails gem の両方を使用してこれを試しましたが、同じ問題が発生しています。

基本的に、ブラウザ ウィンドウのサイズを変更すると、ボックスが新しいページ サイズに合わせて移動しません。代わりに、ブラウザにスクロール バーが表示されるだけです。

ファイルが正常に読み込まれ、適切なセレクターが選択されていることはわかっています。たとえば、masonry() パラメーターの列幅を変更すると、ページを読み込むときにボックスが別の場所に表示されるためです。

また、関連する場合は Bootstrap を使用していますが、ブートストラップ用に予約されているセレクターと衝突しないようにセレクターに名前を付けています。たとえば、#container の代わりに #masonry-container を使用しています。

どんな助けでも大歓迎です、ありがとう!!

アプリケーション.js:

//= require masonry/jquery.masonry

メッセージボード/ショー:

<div id="show-message-board">
    <%= render :partial => "show_message_board", :locals => { :messages => current_user.messages }, :remote => true %>  
</div>


<script>
$(function(){
  $('#masonry-container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 50,
    isAnimated: true
  });
});


</script>

_show_message_board.html.erb:

<div id="masonry-container" class="transitions-enabled infinite-scroll clearfix">
<% messages.each do |message| %>
  <div class="item">
    <p class="message_from"><%= message.user.first_name %> <%= message.user.last_name %>:</p>
    <p class="message_content"><%= message.content %></p>
  </div>
<% end %>

編集：

他の場所で提案されているように、次を使用してみましたが、まだ機能しません!:

$(function(){
    var $container = $('#masonry-container');
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.item'
        });
    });
});
4

1 に答える 1

0

Rails プロジェクトで Masonry を機能させるために私が行ったことを次に示します。おそらくこれはあなたを助けるでしょう...

  1. サイトから「jquery.masonry.min.js」ファイルをダウンロードし、app\assets\javascripts ディレクトリに配置しました。

  2. 追加した 

    //= require jquery.masonry.min
    私のapplication.jsファイルに

  3. app\assets\stylesheets ディレクトリの下に、"masonry.css.scss" という石工用の個別の css ファイルを作成しました (整理整頓のため)。これは私が持っているCSSです（「アイテム」の代わりに「ボックス」を使用しています）： 

    .box {
  margin: 5px;
  padding: 5px;
  background: #D8D5D2;
  font-size: 11px;
  line-height: 1.4em;
  float: left;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: inline;
  width: 260px;
}
    


    .box img {
  width: 100%;
}

  4. 「home\index.html.erb」ファイルのコードを使用しているので、「app\assets\javascripts」ディレクトリの下に「home.js」ファイルを作成しました。これは私が持っている js コードです。

jQuery(document).ready(function () {
        var $container = $('#UserShoppingRequestsContainer');
        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector:'.box',
                isAnimated:true,
                animationOptions:{
                    duration:750,
                    easing:'linear',
                    queue:false
                }
            });
        });
    })

  1. 最後に、「home\index.html.erb」ファイルには、次のようなものがあります。

     <div id="UserShoppingRequestsContainer">
    <% @shopping_requests.each do |shopping_request| %>
       <div class="box col3" id="<%= shopping_request.id.to_s %>">
          <%= link_to image_tag(shopping_request.request_picture.url(:medium)),                    user_shopping_request_path(shopping_request.user, shopping_request) %>
          <p class="serif1_no_padding"><%= shopping_request.category.name %></p>
       </div>
    <% end %>
 </div>

それだけだと思います。

于 2012-12-25T01:41:12.940 に答える