JavaScript PR

freewall.jsを使ったグリッドレイアウト方法【レスポンシブ対応】

記事内に商品プロモーションを含む場合があります

レスポンシブにも対応したfreewall.jsを使ったグリッドレイアウト方法をご紹介します。

レスポンシブにも対応したfreewall.jsを使ったグリッドレイアウトのCSS記述

※グリッド表示エリア(free-wall)のCSS記述です。必要に応じて変更して下さい。

<style>
body {
  margin: 20px 10px;
  padding: 0;
  font-size: 14px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
.free-wall {
  margin: 15px;
}
</style>

レスポンシブにも対応したfreewall.jsを使ったグリッドレイアウトのHTML記述

※グリッド出力先エリア「id=”freewall”」を用意します。

<h1>freewall.jsを使ったグリッドレイアウト</h1>

<div id="freewall" class="free-wall"></div>

freewall.jsを使ったグリッドレイアウトのJavaScriptの記述

※jquery-1.10.2.min.js、freewall.jsファイルを読み込みます。グリッド出力先エリア「#freewall」にfor文でループ回数分グリッド(class=’cell’)を出力させます。今回はグリッド(class=’cell’)要素に用意したjpg画像(1~5.jpg)を出力させてます。必要に応じて変更して下さい。

<script type="text/javascript" src="./jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./freewall.js"></script>
    <script type="text/javascript">
      var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-image: url(./{index}.jpg)'></div>";
      var w = 200, h = 200, html = '', limitItem = 5;
      for (var j = 0; j < limitItem; ++j) {
        for (var i = 0; i < limitItem; ++i) {
          html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1);
        }
      }
      $("#freewall").html(html);

      var wall = new Freewall("#freewall");
      wall.reset({
        selector: '.cell',
        animate: true,
        cellW: 200,
        cellH: 200,
        onResize: function() {
          wall.refresh();
        }
      });
      wall.fitWidth();
      // for scroll bar appear;
      $(window).trigger("resize");
    </script>

freewall.jsを使ったグリッドレイアウトデモページ

freewall.jsを使ったグリッドレイアウトデモページ

ソース元:Freewall – jQuery plugin for creating grid layouts

以下がソース元です。
Freewall – jQuery plugin for creating grid layouts

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。