jQuery MasonryでMasonryレイアウト | CREATE RECORD|blog

jQuery MasonryでMasonryレイアウト

デザインの参考サイトを探している時にこういう感じのデザインを何度となくみかけました。いつか実装したいなぁ〜と思っていましたが、jQuery Masonryで実現できるらしいのでやってみました。

こちらでjQuery Masonryをダウンロードできます。

設置の方法も掲載されています。

上記をヘッダーに記述しjQueryとjQuery Masonryを読み込ませ

要素のIDと要素のClassを設定し別ファイルにして読み込ませても直書きでもOK僕はjquery.masonry.min.jsに書き込んじゃいました。

今回の件とは関係ないですがまさにarticleの使いどころじゃないか!と叫ぶ最近初めてHTML5でコーディングした僕がいました。
別にarticleでないとダメなわけじゃないですよ。

ちなみにCSSは

と言った感じ

実装したページ