レスポンシブにも対応したfreewall.jsを使ったグリッドレイアウト方法をご紹介します。
Contents
レスポンシブにも対応した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 – jQuery plugin for creating grid layouts
以下がソース元です。
Freewall – jQuery plugin for creating grid layouts
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告