【jQuery】グリッドレイアウトを簡単に実装する方法

こんにちは、ハル@haru_elpisです。

jQueryでグリッドレイアウトを簡単に実装する備忘録です、Freewallというプラグインを使用します。

Freewallの使い方

ダウンロード

GitHub - kombai/freewall: Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...

Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet... - GitHub - komb...

head

head内にjquery.jsと当スクリプトを外部ファイルとして記述します。

<head>
  ...
  <script type="text/javascript" src="jquery-1.7.min.js"></script>
  <script type="text/javascript" src="freewall.js"></script>
</head>

HTML

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

Javascript

<script type="text/javascript">   
var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-image: url(i/photo/{index}.jpg)'></div>";
var w = 200, h = 200, html = '', limitItem = 49;
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 ewall = new freewall("#freewall");
ewall.reset({
  selector: '.cell',
  animate: true,
  block: {
    flex: 1
  },
  cell: {
    width: 200,
    height: 200
  },
  fillGap: true,
  onResize: function() {
    ewall.fitWidth();
  }
});
ewall.fitWidth();
</script>