こんにちは、ハル@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>
コメント