Rails 4系 画像の一覧表示

Question

画像の一覧表示を参考サイトのデザインに当て込んで表示する方法を教えてください

参考サイト

決めうちの画像にデザインを当て込む方法はわかりますが、動的になるとわかりません
現在はeach doで画像を表示しています。

開発環境
1.bootstrapは使える状態

Answer 1

もといい方法ありました。このgemが最高です。

masonry-rails のインストール

$ vi Gemfile
gem 'masonry-rails'
$ bundle install

github: kristianmandrup/masonry-rails

masonry 関連のファイルを読み込む

application.css で require。

app/assets/stylesheets/application.css

*= require 'masonry/basic'
*= require 'masonry/centered'
*= require 'masonry/fluid'
*= require 'masonry/gutters'
*= require 'masonry/infinitescroll'
*= require 'masonry/right-to-left'
*= require 'masonry/transitions'
必要なものを require します。各々の機能詳細は readme 参照。

jquery.mansory を application.js で require。

app/assets/javascripts/application.js

1
//= require masonry/jquery.masonry
他にも Option で require できるのがあるので、これも readme 参照。

masonry.js.coffee スクリプトを作成

通常の jQuery で書いても良いですが、私は勉強がてら CoffeeScript で書きました。

app/assets/javascripts/masonry.js.coffee

$ ->
$('#masonry-container').masonry
itemSelector: '.mas-box',
gutterWidth: 5,
isAnimated: true,
animationOptions: {
duration: 500,
easing: 'swing'
}
$ ->
$('.mas-box').hide();
$('.mas-box').each((i) ->
$(this).delay(i * 100).fadeIn(1000))
上のが、Masonry でのレイアウトを指定する部分。

itemSelector : ‘.mas-box’
=> CSS の id が masonry-container 内の、mas-box クラスを一つの要素（タイル1枚）と指定する。

gutterWidth: 5,
=> タイル要素同士の幅を 5px にする。

isAnimated: true
=> ブラウザサイズの変更時に、指定したオプションでアニメーションさせる。

下のは、画像の表示をフェードインさせる処理。

Rails のビューファイル作成

最後に、Rails のビューファイル。images に写真情報の配列が入っているとします。

#masonry-container {
margin: 0 auto;
height: 100%;
}

.mas-box {
width:158px;
margin:5px;
padding:6px;
float: left;
}

html.erbは下記の通りです。

<!-- アイテムインデックス -->
<div id="masonry-container">
  <% @items.each do |item| %>
      <div class="mas-box">
        <%= link_to(item) { image_tag item.picture1_url(:thumb) ,class:"img-rounded " if item.picture1?  } %>
      </div>
  <% end %>
</div>

Answer 2

コード書いてみました。

<!-- アイテムインデックス -->

<div id="container">
  <div class="item">
    <div class="row">
      <div class="col-lg-12">
        <% @items.each do |item| %>

            <%= link_to(item) { image_tag item.picture1_url(:thumb) ,class:"img-rounded " if item.picture1?  } %>

        <% end %>
      </div>
    </div>
    </div>
</div>