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

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> <a class="button" href="index2.html">ソート2(昇順)</a> <a class="button" href="index3.html">ソート3(半分の昇順)</a> <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タグコンテンツを複数ページに別けて、アニメーションソート表示するデモ
上記「ソース元」では別ファイルにわけず1ページ内で対象のliコンテンツを非表示して、ソートさせている様です。
ソート時にアニメーションは「ソース元」のページ下部「Demos&Docs」ページの下にその他設定例が有ります。
-
前の記事
PHPのsetcookieを使用してスマホサイトとPCサイトを切り替える方法 2019.06.07
-
次の記事
FlipboardPageLayout:メージめくりを導入できるJs 2019.06.09