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

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

Contents

レスポンシブにも対応したfreewall.jsを使ったグリッドレイアウトのCSS記述
レスポンシブにも対応したfreewall.jsを使ったグリッドレイアウトのHTML記述
freewall.jsを使ったグリッドレイアウトのJavaScriptの記述
freewall.jsを使ったグリッドレイアウトデモページ
ソース元：Freewall – jQuery plugin for creating grid layouts

レスポンシブにも対応した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>