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でMath.jsを用いて階乗の計算をする

math.permutations関数の引数に任意の数値を渡すと、その階乗の値が返されます。また、第二引数にサブセットの値を渡すと、そこまでの計算結果が返されます。 <html> < …

no image

JavaScriptで値を素因数分解する

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

no image

ブラウザとモバイルデバイス用のインタラクティブチャートを実装するJavaScriptチャートライブラリGoogle Chartsの使い方

公式サイト https://developers.google.com/chart サンプルコード <html> <head> <script type="te …

no image

JavaScriptで値が素数か判定する

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

no image

JavaScriptで0埋めする方法

こんにちは、今日はJavaScriptで0埋めする方法についてまとめていきます。 0埋め 以下のような関数で第一引数に0埋めしたい数値を、第二引数に数値の桁数を指定すると、指定桁数になるように0埋めさ …