jquery.quicksand:liタグコンテンツをアニメーションソートしてくれるjs



liタグコンテンツをカテゴリー毎に数を増減させてアニメーションソートさせたい時に使用しました。

1.ヘッダーとCSSの記述

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.quicksand.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.2em;
	text-align:center;
	padding-bottom:15px;
}
li{list-style-type: none;}
a{
	font-size:14px;
	text-decoration:none;
	line-height:1.4em;
}
a:hover{
	font-size:14px;
	text-decoration:underline;
	line-height:1.4em;
}
#idWrap{
	width:300px;
	margin:0 auto;
	text-align:center;
}
.Sbox {
	overflow: hidden;
}
.Sbox li{
	display: block;
	float: left;
	width:50px;
	height:50px;
	margin: 0;
	padding:4px;
}
-->
</style>

上記CSSは「li」「.Sbox」「.Sbox li」が必要(調整可)です。
 

2.HTMLとJavaScriptの記述

<div id="idWrap">

<a class="button" href="index1.html">ソート1(降順)</a><br>
<a class="button" href="index2.html">ソート2(昇順)</a><br>
<a class="button" href="index3.html">ソート3(半分の昇順)</a>
<br> <br>
<ul class="Sbox">
<li data-id="01"><img src="img1.jpg" width="50" height="50" alt=""></li>
<li data-id="02"><img src="img2.jpg" width="50" height="50" alt=""></li>
<li data-id="03"><img src="img3.jpg" width="50" height="50" alt=""></li>
<li data-id="04"><img src="img4.jpg" width="50" height="50" alt=""></li>
<li data-id="05"><img src="img5.jpg" width="50" height="50" alt=""></li>
<li data-id="06"><img src="img6.jpg" width="50" height="50" alt=""></li>
<li data-id="07"><img src="img7.jpg" width="50" height="50" alt=""></li>
<li data-id="08"><img src="img8.jpg" width="50" height="50" alt=""></li>
<li data-id="09"><img src="img9.jpg" width="50" height="50" alt=""></li>
<li data-id="10"><img src="img10.jpg" width="50" height="50" alt=""></li>
</ul>

<script type="text/javascript">
$(function() {
$('a.button').click(function(e) {
	$.get( $(this).attr('href'), function(data) {
		$('.Sbox').quicksand( $(data).find('li'), {adjustHeight: 'dynamic'} );
	});	
	e.preventDefault();	
});
});
</script>
</div>

ソート対象のliコンテンツの下にJavaScriptを記述します。
また、上記方法はソート内容を以下の別ファイル(index1.html、index2.html、index3.html)に別けて設定してます。
 

3-1.別ファイル(index1.html)の記述例 降順

<ul class="Sbox">
<li data-id="10"><img src="img10.jpg" width="50" height="50" alt=""></li>
<li data-id="09"><img src="img9.jpg" width="50" height="50" alt=""></li>
<li data-id="08"><img src="img8.jpg" width="50" height="50" alt=""></li>
<li data-id="07"><img src="img7.jpg" width="50" height="50" alt=""></li>
<li data-id="06"><img src="img6.jpg" width="50" height="50" alt=""></li>
<li data-id="05"><img src="img5.jpg" width="50" height="50" alt=""></li>
<li data-id="04"><img src="img4.jpg" width="50" height="50" alt=""></li>
<li data-id="03"><img src="img3.jpg" width="50" height="50" alt=""></li>
<li data-id="02"><img src="img2.jpg" width="50" height="50" alt=""></li>
<li data-id="01"><img src="img1.jpg" width="50" height="50" alt=""></li>
</ul>

3-2.別ファイル(index2.html)の記述例 昇順

<ul class="Sbox">
<li data-id="01"><img src="img1.jpg" width="50" height="50" alt=""></li>
<li data-id="02"><img src="img2.jpg" width="50" height="50" alt=""></li>
<li data-id="03"><img src="img3.jpg" width="50" height="50" alt=""></li>
<li data-id="04"><img src="img4.jpg" width="50" height="50" alt=""></li>
<li data-id="05"><img src="img5.jpg" width="50" height="50" alt=""></li>
<li data-id="06"><img src="img6.jpg" width="50" height="50" alt=""></li>
<li data-id="07"><img src="img7.jpg" width="50" height="50" alt=""></li>
<li data-id="08"><img src="img8.jpg" width="50" height="50" alt=""></li>
<li data-id="09"><img src="img9.jpg" width="50" height="50" alt=""></li>
<li data-id="10"><img src="img10.jpg" width="50" height="50" alt=""></li>
</ul>

 

3-3.別ファイル(index1.html)の記述例 半分の昇順

<ul class="Sbox">
<li data-id="01"><img src="img1.jpg" width="50" height="50" alt=""></li>
<li data-id="03"><img src="img3.jpg" width="50" height="50" alt=""></li>
<li data-id="05"><img src="img5.jpg" width="50" height="50" alt=""></li>
<li data-id="07"><img src="img7.jpg" width="50" height="50" alt=""></li>
<li data-id="09"><img src="img9.jpg" width="50" height="50" alt=""></li>
</ul>

 
liタグコンテンツを複数ページに別けて、アニメーションソート表示するデモ
 
ソース元:jQuery Quicksand plugin
 

上記「ソース元」では別ファイルにわけず1ページ内で対象のliコンテンツを非表示して、ソートさせている様です。
ソート時のアニメーションは上記「ソース元」ページ下部の「Demos&Docs」ページ内に、その他の設定例が有ります。