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

シンプルなレスポンシブチャートJavaScriptライブラリChartist.jsの使い方

公式サイト http://gionkunz.github.io/chartist-js/index.html GETTING STARTEDhttp://gionkunz.github.io/char …

no image

JavaScriptで数値を2進数や16進数の文字列に変換する

toString関数の引数に基数の値を指定すると、その形式に変換された文字列が返されます。基数は2~36までの間で指定可能です。 16進数に変換する この例では30を16進数に変換した1eが出力されま …

no image

JavaScriptでスタックトレースを出力する関数Console.trace

console.trace()を実行するとコンソールにスタックとレースを出力することができます。 function test1() { test2(); } function test2() { co …

no image

inputタグで選択した画像をimgタグに表示する

コード input要素で画像を選択した際に、選択した画像をimg要素に表示するサンプルコードです。 URL.createObjectURL()を使用する FileReader.readAsDataUR …

no image

File APIでinput要素で選択したファイルの情報を確認する

サンプル <input type="file"> <script> const input = document.querySelector(‘input’ …