NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

軽快な動作で要素をウィンドウ幅に応じてタイル状に並べることができる「Wookmark jQuery Plugin」

2013年7月4日jQueryプラグイン活用

軽快な動作で要素をウィンドウ幅に応じてタイル上に並べることができる「Wookmark jQuery Plugin」

jQueryプラグイン「Wookmark jQuery Plugin」を使用すると、ウィンドウ幅に応じて要素や画像をタイル状に並べることができます。タイル状に並べることできるプラグインの中では比較的動作が軽めです。

デモページ

JavaScript

(function($){
	$(function() {
		$('#container .box').wookmark({
			offset: 1,
			itemWidth: 140,
			autoResize: true
		});
	});
})(jQuery);

HTML

<div id="container">
	<div class="box size01 bgColor01"></div>
	<div class="box size02 bgColor02"></div>
	<div class="box size03 bgColor03"></div>
</div>

CSS

#container {
	position: relative;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 軽快な動作で要素をウィンドウ幅に応じてタイル状に並べることができる「Wookmark jQuery Plugin」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com