弾むような動きでグリッドを表示する方法【dylay.js】

dylay.jsを使って、弾むような動きでグリッドエリアを表示する方法をご紹介します。複数グリッドをソートすることも可能です。

dylay.jsを使って、弾むような動きでグリッドを表示するJavaScriptの記述

※jquery.min.js、jquery.easing.1.3.js、dylay.jsファイルを読み込みます。$(グリッドエリア).dylay({スピードやeasingの設定})を記述します。$(グリッドエリア).dylay(‘sort’,ソートルール})でソートルールでソートします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="dylay.js"></script>
<script type="text/javascript">
$(function() {
    $('#dylay').dylay({
		speed:1500,
		easing:'easeOutElastic',
		selector:'>li'	//配置したい子要素
	});
	
	//ソート
	$('#sorts a').on('click', function () {
		$('#dylay').dylay('sort', $(this).data('sort-by'), $(this).data('sort-way'));	
		return false;
	});
	
});
</script>

弾むような動きでグリッドを表示するCSSの記述

※グリッドエリア（#dylay li）のCSS記述です。必要に応じて変更して下さい。

<style type="text/css" media="all">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:15px 0 10px 0;
	line-height:1.4em;
}
.clWrap{
	width:80%;
	margin:0 auto;
}
#sorts{
	margin:0 auto;
	padding:0 0 20px 0;
	list-style:none;
	width:200px;
}
#sorts li{
	padding-bottom:4px;
}
#sorts li a{
	color:#0066FF;
	font-size:16px;
	text-decoration:none;
}
#sorts li a:hover{
	color:#0099FF;
}
#dylay{
	margin:0;
	padding:0;
	list-style:none;
}
#dylay li{
	float:left;
	padding:3% 0;
	margin:1%;
	border-radius:5px;
	background:#0066FF;
	list-style:none;
	font-size:14px;
	text-align:center;
	font-weight:bold;
	color:#FFFFFF;
	width:10%;
}
-->
</style>

弾むような動きでグリッドを表示するHTMLの記述例

※グリッドエリア（id=”dylay”）にグループ（class=”voyelle”かclass=”consonne”）とソート順（data-foo=数字）を設定します。必要に応じて変更して下さい。

<div class="clWrap">
    <h1>グリッドを弾むような動きで表示<br />
    （以下のリンクでソートもできます）</h1>
    
    <ul id="sorts">
        <li><a href="#">テキスト昇順</a></li>
        <li><a href="#" data-sort-way="desc">テキストの降順</a></li>
        <li><a href="#" data-sort-by="foo">data-foo値（昇順）</a></li>
        <li><a href="#" data-sort-by="foo" data-sort-way="desc">data-foo値（降順）</a></li>
    </ul>
    
    <ul id="dylay">
        <li style="height:20px;" class="voyelle"  data-foo="5">E</li>
        <li style="height:40px;" class="consonne" data-foo="6">F</li>
        <li style="height:40px;" class="consonne" data-foo="3">C</li>
        <li style="height:20px;" class="consonne" data-foo="2">B</li>
        <li style="height:60px;" class="voyelle"  data-foo="4">D</li>
        <li style="height:60px;" class="consonne" data-foo="1">A</li>
        <li style="height:20px;" class="consonne" data-foo="7">G</li>
        <li style="height:20px;" class="voyelle"  data-foo="8">H</li>
        <li style="height:40px;" class="consonne" data-foo="9">I</li>
        <li style="height:40px;" class="consonne" data-foo="10">J</li>
        <li style="height:20px;" class="consonne" data-foo="11">K</li>
        <li style="height:60px;" class="voyelle"  data-foo="12">L</li>
        <li style="height:60px;" class="consonne" data-foo="13">M</li>
        <li style="height:20px;" class="consonne" data-foo="14">N</li>
        <li style="height:20px;" class="consonne" data-foo="15">O</li>
        <li style="height:60px;" class="consonne" data-foo="16">P</li>
        <li style="height:20px;" class="consonne" data-foo="17">Q</li>
        <li style="height:40px;" class="consonne" data-foo="18">R</li>
        <li style="height:20px;" class="consonne" data-foo="19">S</li>
        <li style="height:40px;" class="consonne" data-foo="20">T</li>
        <li style="height:20px;" class="consonne" data-foo="21">U</li>
        <li style="height:40px;" class="consonne" data-foo="22">V</li>
        <li style="height:60px;" class="consonne" data-foo="23">W</li>
        <li style="height:40px;" class="consonne" data-foo="24">X</li>
        <li style="height:60px;" class="consonne" data-foo="25">Y</li>
        <li style="height:40px;" class="consonne" data-foo="26">Z</li>
    </ul>

</div><!--/clWrap-->

dylay.js：グリッドを弾むような動きで表示するデモページ

dylay.js：グリッドを弾むような動きで表示するデモ

ソース元：DyLay – a simple dynamic layout jQuery plugin

ソース元：DyLay – a simple dynamic layout jQuery plugin

グリッドかつソート系って色々ありますよね。
この動きってサイトのデザイン的にはまらないと使うのが難しそう。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。