Masonryを使って可変レイアウトを作成
Masonryを使って可変レイアウトを実装してみました。
画面サイズの変更はもちろんのこと、色付きのタイルをJavascriptで削除すると、再計算が走って、タイルが再構成されます。
Masonryのセットアップは、githubのreadmeに従って実施しました。
■ Gemfileへの追加
gemfile
gem 'masonry-rails'
gemfileに追加して、インストールを実施します。
~/workspace/xapp7(masonry)$ bundle install
~/workspace/xapp7(masonry)$ bundle update
■ CSSとJavascriptへの追加
各ファイルにmasonryを読み込むように追加して行きます。
application.css
*= require font-awesome
*= require 'masonry/basic'
*= require 'masonry/centered'
*= require 'masonry/fluid'
*= require 'masonry/gutters'
*= require 'masonry/infinitescroll'
*= require 'masonry/right-to-left'
*= require 'masonry/transitions'
*= require_tree .
*= require_self
*/
javascript.js
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require masonry/jquery.masonry
//= require turbolinks
//= require_tree .
■ HTML
HTML, CSSの設定については、可変グリッドレイアウトが簡単にできるjQueryプラグイン3選 - ウェブ学のすすめを多いに参考にさせていただきました。
上記サイトの設定に加えて、javascriptでタイルを削除する為にidとonclickを追加しています。
app/views/mains/index.html.erb
■ CSS
CSSは特に捻りはないです。
app/assets/stylesheets/masonry.css.scss
■ Javascript
Masonryを動かす為のJavascriptは以下のようになっています。turbolinkがインストールしてあると、ページ再読み込み時にタイルの整列が正しく行われないことが分かったので、オンロードを少し修正してあります。
app/assets/javascripts/masonry.js
そして、こちらがタイルを削除する為のHTMLです。
app/assets/javascripts/main.js
以上で設定は完了です。