3テラバイト

プログラム関連備忘録サイト。主にゲーム。

JavaScript

グリッドレイアウトを実装するJavaScriptライブラリMasonryの使い方

投稿日:

こんにちは、今日はWebサイトにグリッドレイアウトを実装することができるJavaScriptライブラリ、Masonryの使い方についてまとめていきます。

公式サイト

https://masonry.desandro.com/

サンプルコード

CDNからライブラリの読み込みを行なっているため、以下のコードで動作が確認できます。
こちらのサンプルではjQueryも使用しています。

公式サイトにもいくつかサンプルがあり、そちらとほぼ同じものです。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Language" content="ja">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Masonryテスト</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <style>
      * { box-sizing: border-box; }
      body { font-family: sans-serif; }
      .grid {
        background: #EEE;
        max-width: 1200px;
      }

      .grid-item {
        width: 160px;
        height: 120px;
        float: left;
        background: #D26;
        border: 2px solid #333;
        border-color: hsla(0, 0%, 0%, 0.5);
        border-radius: 5px;
      }

      .grid-item--width2 { width: 320px; }
      .grid-item--width3 { width: 480px; }
      .grid-item--width4 { width: 640px; }

      .grid-item--height2 { height: 200px; }
      .grid-item--height3 { height: 260px; }
      .grid-item--height4 { height: 360px; }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height2"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width3"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2 grid-item--height3"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
    </div>

    <script>
      $('.grid').masonry({
        itemSelector: '.grid-item'
      });
    </script>
  </body>
</html>

-JavaScript


comment

メールアドレスが公開されることはありません。

関連記事

no image

画像のExif情報を読み込むJavaScriptライブラリExif.jsの使い方

Exif.jshttps://github.com/exif-js/exif-js 使い方 ここではローカルサーバーに配置したHTMLファイルから使用します。fileプロトコルでアクセスしている場合は …

no image

JavaScriptで値が素数か判定する

以下のコードでは、渡された値が素数か判定する関数isPrimeNumberを定義しています。 Number.isIntegerで引数が整数か判定し、その後1から引数で渡された値の範囲で引数の値を割って …

no image

input要素で選択したファイルのバイナリデータをFile APIで表示する

サンプルコード input要素で選択したファイルのバイナリデータを16進数表記でpre要素に出力します。 <input type="file"> <pre> …

no image

JavaScriptで値を素因数分解する

以下のコードでは、渡された値を素因数分解して文字列で結果を返す関数primeFactorizationを定義しています。 function primeFactorization(value) { va …

no image

JavaScriptでブラウザ履歴の前のページや次のページへ移動する

前のページへ window.history.back() 次のページへ window.history.forward() 指定ページ数前へ window.history.go関数の引数にマイナスの数値 …