「MixItUp」 は、要素のレイアウトをアニメーション付きで並び替えたり、絞り込んで表示したりできるjQueryプラグインです。
カテゴリーによって並び替えたり、特定のカテゴリーだけを表示したり、タイル形式・リスト形式を切り替えたりできるので、ポートフォリオサイトやギャラリーサイト、ブログのトップページに向いています。
index.html
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script> <script> // On document ready: $(function(){ // Instantiate MixItUp: $('#Container').mixItUp(); }); </script> <style> *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body, button{ font-family: 'Helvetica Neue', arial, sans-serif; } .controls{ padding: 2%; background: #333; color: #eee; } label{ font-weight: 300; margin: 0 .4em 0 0; } button{ display: inline-block; padding: .4em .8em; background: #666; border: 0; color: #ddd; font-size: 16px; font-weight: 300; border-radius: 4px; cursor: pointer; } button.active{ background: #68b8c4; } button:focus{ outline: 0 none; } button + label{ margin-left: 1em; } .container{ padding: 2% 2% 0; text-align: justify; font-size: 0.1px; background: #68b8c4; -webkit-backface-visibility: hidden; } .container:after{ content: ''; display: inline-block; width: 100%; } .container .mix, .container .gap{ display: inline-block; width: 49%; } .container .mix{ text-align: left; background: #03899c; margin-bottom: 2%; display: none; } .container .mix.category-1{ border-top: 2px solid limegreen; } .container .mix.category-2{ border-top: 2px solid yellow; } .container .mix:after{ content: attr(data-myorder); color: white; font-size: 16px; display: inline-block; vertical-align: top; padding: 4% 6%; font-weight: 700; } .container .mix:before{ content: ''; display: inline-block; padding-top: 60%; } img { max-width: 100%; } @media all and (min-width: 420px){ .container .mix, .container .gap{ width: 32%; } } @media all and (min-width: 640px){ .container .mix, .container .gap{ width: 23.5%; } } </style> </head> <body> <div class="controls"> <label>カテゴリー:</label> <button class="filter" data-filter="all">全部</button> <button class="filter" data-filter=".category-1">赤いもの</button> <button class="filter" data-filter=".category-2">緑のもの</button> <button class="filter" data-filter=".category-3">黄色いもの</button> <button class="filter" data-filter=".category-4">くだもの</button> <label>Sort:</label> <button class="sort" data-sort="myorder:asc">Asc</button> <button class="sort" data-sort="myorder:desc">Desc</button> </div> <div id="Container" class="container"> <div class="mix category-1" data-myorder="1"><img src="img/01_s.jpg"></div> <div class="mix category-1" data-myorder="2"><img src="img/02_s.jpg"></div> <div class="mix category-1 category-4" data-myorder="3"><img src="img/03_s.jpg"></div> <div class="mix category-2" data-myorder="4"><img src="img/04_s.jpg"></div> <div class="mix category-2 category-4" data-myorder="5"><img src="img/05_s.jpg"></div> <div class="mix category-2" data-myorder="6"><img src="img/06_s.jpg"></div> <div class="mix category-3 category-4" data-myorder="7"><img src="img/07_s.jpg"></div> <div class="mix category-3" data-myorder="8"><img src="img/08_s.jpg"></div> <div class="mix category-3" data-myorder="9"><img src="img/09_s.jpg"></div> <div class="gap"></div> <div class="gap"></div> </div> </div> </body> </html>