びよーんとした動きでグリッド状に配置してくれるjQueryプラグイン「DyLay」

Pinterestの登場からグリッド状に要素を配置するデザインが流行りました。
その多くがウィンドウサイズを変えた時にのそーっと動くものでした。
jQueryプラグインのDyLay - a simple dynamic layout jQuery pluginを利用するとびよーんと小気味よいビートを刻みながら動いてくれます。

sponsors

使用方法

DyLay - a simple dynamic layout jQuery pluginからファイルをダウンロード。

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="dylay.js"></script>
<script type="text/javascript">
$(function() {
    $('#id名').dylay({
		speed: 1500, //アニメーションスピード
		easing: 'easeOutElastic', //easingプラグインの動き
		selector: '>li' //配置したい子要素
	});
});
</script>
あとは要素を記述していけば完成です。

<ul id="dylay">
	<li>A</li>
	<li>B</li>
	<!-- 以下要素分 -->
</ul>
CSSは以下のように書いておきます。

#id名 { margin: 0; padding: 0; list-style: none; }
    #id名 li { float: left; margin: 2px; border-radius: 5px; padding: 2px 5px; font-size: 10px; }

サンプル

sponsors

Javascriptサンプルページ一覧
skuare.net