Masonry.jsで要素をPinterest風に並べる方法

Masonry.jsで要素をPinterest風に並べる方法

スポンサーリンク

スポンサーリンク

高さが異なる要素をCSSによるfloatを使って横並びにしたときに、

「要素を上に詰める形で表示させたい!」

なんてときに役に立つ、「Masonry」というjQueryを紹介します。

Masonryを使ったデモ画面は以下です。

デモ画面

Masonry公式サイト

公式サイトはこちらです。

Masonry/公式サイト

公式サイトにて、Masonryの使い方が英語でざっくりと説明されています。

しかし、

  • 公式サイトからのCDN読み込みが異常に時間がかかるので、webサイトの表示に時間がかかってしまう
  • 掲載されている情報ではきちんと動作しなかった

ということがありましたので、カスタマイズしたものを改めて日本語で説明したいと思います。

Masonryの使い方

それではMasonryの実装方法を説明していきます。

jQueryの読み込み

まずは基本となるjQueryを読み込みます。既に読み込んでいるという方は飛ばして先にお進みください。

jQueryはCDNで読み込む方法がオススメです。

jsファイルのダウンロードと設置

Masonry/公式サイトにて、jsファイルが入っているzipファイルをダウンロードします。

Masonry公式サイトでzipファイルをダウンロード

ダウンロードしたzipファイルの中の、「masonry.pkgd.min.js」というファイルをサーバーに設置します。

Masonryをダウンロードして解凍したファイル

HTML <head>

Masonryを実装したいHTMLファイルの<head>の中に、以下の記述を加えます。ディレクトリについては任意の箇所に書き換えてください。

HTML <body>

要素を表示させる箇所では以下のように記述します。

デモ画面のものをそのまま流用しているので、要素のサイズ等についてはお好きなように変更してください。

CSS

CSSについてもデモ画面のものを流用しているので、お好きなように変更してください。

Script

Scriptについては以下のように記述します。

以上となります。

Masonryまとめ

デモ画面のような要素の並びをCSSで実現しようとすると少し面倒くさいですが。

jQueryのMasonryを利用することによって、コピペとCSSの修正だけで簡単に実現出来てしまいます。

横長や縦長の画像を、比率を変えることなく表示したい場合なんかに有効ですね。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク