【webデザイン JS】MasonryでPinterest風カード型レイアウト

2020年2月25日 (更新日:2020年4月15日)

【webデザイン JS】MasonryでPinterest風カード型レイアウト:【webデザイン JS】Masonryで...


【webデザイン JS】MasonryでPinterest風カード型レイアウト

前回、flexboxでPinterest風のカード型レイアウトを作ってみました。
一応、それらしい感じは出せましたがやはり現段階では私の勉強不足もありますがJavaScriptを使ったカード型レイアウトの方が現実的だと思いました。
タイル状に敷き詰めてレイアウトすることがCSSだけでは難しいところですが2次元レイアウトモジュールのdisplay:grid;でできそうな予感はしますがブラウザのサポートを考えるとJavaScriptかなと思いました。

 

See the Pen
Card type layout by Masonry
by tatsuya☆ラボラトリ【 tatsuya-lab.com 】 (@labtatsuya)
on CodePen.

 

まずはjQueryをインストール

ということでMasonryバージョンもご紹介しておきます。
<section>をカードにして中に画像と見出し、本文を用意します。
MasonryはjQueryライブラリが無いと動きません。
ですのでまずjQueryを読み込みます。
ファイルをダウンロードして<script>でリンクします。
ワードプレスを使っている場合はファイルを一旦ダウンロードして使用した方が読み込むスピードは速くなると思います。
今回はネットから読み込むCDNを使います。

jQueryの公式サイトにアクセスします。

download jQueryボタンを押します。
飛んだページの中頃にGoogle CDNのリンクがありますのでクリックします。

さらに飛んだ先でjQueryの項目の中に2.x snippet:のリンクが記述してありますのでコピーします。
3.x snippet:のリンクではMasonryは動きませんでした。

jQueryプラグインMasonry

次にMasonryをインストールします。
公式ページにアクセス。

トップページから下へスクロールするとCDNの項目があります。

ここからCDNのスクリプトをコピー。

HTMLに戻って</body>の直前に

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

をコピペ。
そのすぐ下に

 

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

をコピペして二つ並べます。
これで準備ができました。
さらにその直下にscriptを記述します。
Masonryの初期設定です。

 

  <script type="text/javascript">
    $(window).load(function(){
      $('main').masonry({
  // options
  itemSelector: 'section',
  columnWidth: 210
});

    });

  </script>

カード型にさせたいタグ、今回は<section>をカード型に並べるために親要素にmasonryを設定します。(今回は<main>)
そしてitemSelector:でカード型にさせたい<section>を指定。
この時に<section>の幅も設定しておきます。

最終的なコードです。

 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  <script type="text/javascript">
    $(window).load(function(){
      $('main').masonry({
  // options
  itemSelector: 'section',
  columnWidth: 210
});

    });

  </script>

あとはCSSで見た目の部分を成形していきます。
<section>の幅を200ピクセルにしてmarginを左右合わせて10ピクセル
合計で210ピクセルにします。
masonryの初期設定のcolumnWidth:の数値を210にし、CSSと合わせます。

 

main section{
  width: 200px;
  height: auto;
  border-radius: 5px;
  margin: 0 5px 10px 5px;
}

 

スマホサイズ

 

タブレットサイズ

 

PCサイズ