こんにちは、ハル@haru_elpisです。
jQueryでグリッドレイアウトを簡単に実装する備忘録です、Freewallというプラグインを使用します。
目次
Freewallの使い方
ダウンロード
GitHub
GitHub - kombai/freewall: Freewall is a cross-browser and responsive jQuery plugin to help you creat...
Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet... - GitHub - kombai...
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>
[affi id=23]
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>
[affi id=23]