New-Village

月間ブログ。だいたい1カ月に1回は更新しているようです。

Masonryを使って可変レイアウトを作成

Masonryを使って可変レイアウトを実装してみました。

画面サイズの変更はもちろんのこと、色付きのタイルをJavascriptで削除すると、再計算が走って、タイルが再構成されます。

f:id:New-Village:20140906235636p:plain

 

Masonryのセットアップは、githubのreadmeに従って実施しました。

■ Gemfileへの追加

gemfile

gem 'masonry-rails

gemfileに追加して、インストールを実施します。

~/workspace/xapp7(masonry)$ bundle install
~/workspace/xapp7(masonry)$ bundle update

 

CSSJavascriptへの追加

各ファイルに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

 

以上で設定は完了です。