カラムを自動で揃えてくれるjQueryプラグイン「Masonry」の使い方

カラムを自動で揃えてくれるjQueryプラグイン「Masonry」の使い方

Masonryは、カラムを自動で横詰めしてくれるjQueryプラグインです。
本家サイトには「リキッドレイアウトのためのレイアウトライブラリ」として記載されています。

リキッドレイアウトを厳密に言うと、横幅を100%で表示した時のことを指すかと思いますが、Masonryは別に横幅を100%にしてなくても大丈夫です。
1000pxの横幅なら、その中で自動的に並べてくれるという感じですので、何かと便利に使えそうな感じがしています。

ということで、今回も先にサンプルを見てみて下さい。
コンテンツの幅を100%の大枠の中に95%（中央寄せ）で取っていますので、参考になること請け合いです（笑）

「Masonry」を組み込んだページのサンプルです。

• 組み込み済みサンプル

以下が本家サイトとGit Hubです。

• Masonry
• Git Hub

phptemp_msr_160401.zip

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

凡そ、流れ的には以下のような順番です。

1. jQuery設定ファイルを読み込み、設定記述をする。
2. アップロードしましょう！

前回のプラグインでもそうですが、今回も記述を追記しただけですので、非常に簡単に組み込めてしまう特徴があります。
既存コンテンツをそのままで使うことが出来るのは嬉しいところですよね。

サンプルで配布しているファイルでは index.php のみ組み込んでいますので、 index.php のみ見てもらえればと思います。 ヘッダに以下の記述を追記しています。

追記する設定の内容

<script type="text/javascript" src="/js/masonry.pkgd.js"></script>
<script type="text/javascript">
$(function() {
$('#jq_liquid-txt').masonry({
	itemSelector: '.column_big_box',
	columnWidth: 180
});
});
</script>
<link href="/css/column.css" type="text/css" rel="stylesheet" />

一番下で読み込ませているCSSは、追加コンテンツ用のCSSを記述しています。
横詰めするカラムの装飾です。

リキッドレイアウトにしていますので、レスポンシブは考慮していません。
どのデバイスにでも対応してくれています。

本家サイトにはオプションの設定などもあります。
当サイトで配布している内容では最低限のセッティングしか記述していません。

サンプル記述内の「 #jq_liquid-txt 」は親ボックス、「 .column_big_box 」は子ボックスになり、この二つを指定して子ボックスをコントロールするという流れです。

ということで、後はアップロードして下さい。
終了です。

Git Hubでダウンロードしたファイル中には、テストファイルが用意されています。
「masonry-master」の中にある「 /sandbox/~ 」と「 /test/~ 」です。
厳密にチェックはしていませんが、オプションタイプ毎にファイルが用意されているようですので、気になる方やバリエーションをお求めの場合は、そちらも要チェックです。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_160202.zip 」です。

いかがでしたでしょうか？
前回のカラムの高さを揃えるjQueryプラグイン、今回のカラムの位置を自動で調整するプラグイン、これらのような補助的な要素が強いjQueryプラグインが手軽に扱えるのは嬉しいところですよね。
少々強引にコンテンツを組んでも解決出来てしまいそうです。

ただ、先のプラグインもそうですが、サイズのバランスや調整などを度外視してしまうと、後々面倒なことになりそうな気がします。
サイズを無視すると、揃うものも揃いません。
この辺りは、フロントエンジニアさんの仕事だと思いますが、きっちりコーディングをしないと、思ったようなインターフェイスにならないので要注意です。

しかし、何年も前に見たこの手のjQueryプラグインかJavaScriptはもっと完成度が低かったイメージがありました。
ですので、私の中では、この手のコンテンツはいろんな意味でしんどいイメージがありましたが、今回のjQueryプラグインでちょっとイメージが変わった気がします。

過去のニッチなjQueryプラグインを改めて見直すのも、何かヒントを得るきっかけになるかもしれません、そんなことを思います。

執筆 : 清水 隼斗

カラムを自動で揃えてくれるjQueryプラグイン「Masonry」の使い方の通常ページ