フィルタリングもできるjQueryプラグイン「isotope.js」
デモ
↓別ウィンドウを開いて見る
フィルタリングもできるjQueryプラグイン｜isotope.js - js do it
※おすすめQRコード読み取りアプリ
最速QR
カテゴリ: ユーティリティ
サイズ: 1.5 MB
価格： 無料
参考
コード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>isotope.js</title> <link rel="stylesheet" href="http://webgaku.biz/css/prettyPhoto.css"> <link href='http://fonts.googleapis.com/css?family=Lemon' rel='stylesheet'> <link href='http://fonts.googleapis.com/css?family=Damion' rel='stylesheet' type='text/css'> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://webgaku.biz/js/jquery.prettyPhoto.js"></script> <script src="http://webgaku.biz/js/jquery.isotope.min.js"></script> </head> <body> <section id="options" class="clearfix"> <h1 data-text="Wish List">Wish List</h1> <h3>絞込み</h3> <ul id="filters" class="option-set clearfix" data-option-key="filter"> <li><a href="#filter" data-option-value="*" class="selected">show all</a></li> <li><a href="#filter" data-option-value=".html5">HTML5</a></li> <li><a href="#filter" data-option-value=".css3">CSS3</a></li> <li><a href="#filter" data-option-value=".wordpress">WordPress</a></li> <li><a href="#filter" data-option-value=".php">PHP</a></li> <li><a href="#filter" data-option-value=".api">API</a></li> </ul> </section> <!-- #options --> <div id="container" class="clearfix"> <div class="element html5"> <a href="http://www.amazon.co.jp/gp/product/4899772750/ref=as_li_tf_il?ie=UTF8&camp=247&creative=1211&creativeASIN=4899772750&linkCode=as2&tag=applogy-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4899772750&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=applogy-22" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=applogy-22&l=as2&o=9&a=4899772750" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> <div class="element html5 css3"> <a href="http://www.amazon.co.jp/gp/product/4883378152/ref=as_li_tf_il?ie=UTF8&camp=247&creative=1211&creativeASIN=4883378152&linkCode=as2&tag=applogy-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4883378152&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=applogy-22" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=applogy-22&l=as2&o=9&a=4883378152" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> <div class="element wordpress"> <a href="http://www.amazon.co.jp/gp/product/4844362887/ref=as_li_tf_il?ie=UTF8&camp=247&creative=1211&creativeASIN=4844362887&linkCode=as2&tag=applogy-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4844362887&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=applogy-22" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=applogy-22&l=as2&o=9&a=4844362887" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> <div class="element html5"> <a href="http://www.amazon.co.jp/gp/product/4798034452/ref=as_li_tf_il?ie=UTF8&camp=247&creative=1211&creativeASIN=4798034452&linkCode=as2&tag=applogy-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4798034452&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=applogy-22" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=applogy-22&l=as2&o=9&a=4798034452" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> <div class="element html5"> <a href="http://www.amazon.co.jp/gp/product/4797369574/ref=as_li_tf_il?ie=UTF8&camp=247&creative=1211&creativeASIN=4797369574&linkCode=as2&tag=applogy-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4797369574&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=applogy-22" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=applogy-22&l=as2&o=9&a=4797369574" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> <div class="element php"> <a href="http://www.amazon.co.jp/gp/product/4797369140/ref=as_li_ss_il?ie=UTF8&camp=247&creative=7399&creativeASIN=4797369140&linkCode=as2&tag=applogy-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4797369140&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=applogy-22" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=applogy-22&l=as2&o=9&a=4797369140" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> <div class="element api"> <a href="http://www.amazon.co.jp/gp/product/4627847327/ref=as_li_ss_il?ie=UTF8&camp=247&creative=7399&creativeASIN=4627847327&linkCode=as2&tag=applogy-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4627847327&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=applogy-22" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=applogy-22&l=as2&o=9&a=4627847327" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> <div class="element css3"> <a href="http://www.amazon.co.jp/gp/product/4844362666/ref=as_li_ss_il?ie=UTF8&camp=247&creative=7399&creativeASIN=4844362666&linkCode=as2&tag=applogy-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4844362666&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=applogy-22" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=applogy-22&l=as2&o=9&a=4844362666" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> <div class="element app"> <a href="http://www.amazon.co.jp/gp/product/4883377741/ref=as_li_ss_il?ie=UTF8&camp=247&creative=7399&creativeASIN=4883377741&linkCode=as2&tag=applogy-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4883377741&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=applogy-22" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=applogy-22&l=as2&o=9&a=4883377741" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> <div class="element app"> <a href="http://www.amazon.co.jp/gp/product/4839943710/ref=as_li_ss_il?ie=UTF8&camp=247&creative=7399&creativeASIN=4839943710&linkCode=as2&tag=applogy-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4839943710&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=applogy-22" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=applogy-22&l=as2&o=9&a=4839943710" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> <div class="element api"> <a href="http://www.amazon.co.jp/gp/product/4798033197/ref=as_li_ss_il?ie=UTF8&camp=247&creative=7399&creativeASIN=4798033197&linkCode=as2&tag=applogy-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4798033197&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=applogy-22" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=applogy-22&l=as2&o=9&a=4798033197" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> <div class="element html5 css3"> <a href="http://www.amazon.co.jp/gp/product/4839943486/ref=as_li_ss_il?ie=UTF8&camp=247&creative=7399&creativeASIN=4839943486&linkCode=as2&tag=applogy-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4839943486&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=applogy-22" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=applogy-22&l=as2&o=9&a=4839943486" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> </div> <!-- #container --> </body> </html>
CSS
/* Start: Recommended Isotope styles */ /**** Isotope Filtering ****/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* End: Recommended Isotope styles */ /* disable CSS transitions for containers with infinite scrolling*/ .isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } /**** Base styles ****/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { padding: 20px; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif; font-size: 13px; line-height: 1.7em; background: #1F1E1D url(http://jsrun.it/assets/j/1/6/Y/j16Yc.png); color: #FFF; } h1, h2, h3, p, ul, ol, pre, dl { margin-bottom: 1.0em; } h1, h2, h3 { font-weight: bold; } h1 { font-family: 'Damion', cursive; line-height: 1.1em; margin-bottom: 0.5em; font-size: 48px; position: relative; color: #444; text-shadow: 0 -1px -1px white; } h1::after { content: attr(data-text); position: absolute; left: 0; color: white; -webkit-mask-image: -webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,1)),color-stop(50%, rgba(0,0,0,0.1)),to(rgba(0,0,0,0))); } h2 { font-size: 24px; line-height: 1.1em; } ul, ol { margin-left: 1.5em; } a { color: #FB4; text-decoration: none; } a:hover { color: #4BF; } a:active { color: #1FB; background: black; } a img { border: none; } em { font-style: italic; } strong { font-weight: bold; } /**** Isotope styles ****/ /* required for containers to inherit vertical size from window */ html, body { height: 100%; } #container { width:820px; margin:20px auto; } .element { width: 125px; height: 160px; margin: 5px; float: left; overflow: hidden; position: relative; background: #888; color: #222; } /**** Example Options ****/ #options { padding-bottom: 1.0em; width:600px; margin:0 auto; text-shadow:0 -1px 3px #202020; } #options h3 { margin-bottom: 0.2em; font-size: 15px; } #options h4 { font-weight: bold; } #options ul { margin: 0; list-style: none; } #options ul ul { margin-left: 1.5em; } #options li { float: left; margin-bottom: 0.2em; width:100px; text-align:center; } #options li a { display: block; padding: 0.4em 0.5em; background-color: #DDD; color: #fff; font-weight: bold; text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 ); border-right:1px solid #5d5d5d; border-left:1px solid #929292; border-bottom:1px solid #575757; border-top:1px solid #797979; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color: #5f5f5f; } #options li a:hover { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555)); background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% ); background-color: #383838; -moz-box-shadow: inset 0 0 5px 5px #535353; -webkit-box-shadow: inset 0 0 5px 5px #535353; box-shadow: inset 0 0 5px 5px #535353; } #options li:first-child a { border-radius: 7px 0 0 7px; border-left: none; } #options li:last-child a { border-radius: 0 7px 7px 0; } #options li a.selected { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555)); background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% ); background-color:#383838; -moz-box-shadow: inset 0 1px 6px 1px #000; -webkit-box-shadow: inset 0 1px 6px 1px #000; box-shadow: inset 0 1px 6px 1px #000; } /* Combination filter options*/ #options .option-combo { display: inline-block; float: left; margin-right: 10px; } #options .option-combo ul { margin-right: 20px; display: inline-block; } #options .option-combo h2, #options .option-combo h4 { line-height: 34px; margin-bottom: 0; margin-right: 5px; display: inline-block; vertical-align: top; } /* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } @media only screen and (max-width:480px){ #container { width:100%; margin:10px auto; } #options { width:320px; } #options li { width:100px; } #options li:first-child a { border-radius: 0; } #options li:last-child a { border-radius: 0; } }
JavaScript
$(function(){ var $container = $('#container'); $container.isotope({ itemSelector : '.element' }); var $optionSets = $('#options .option-set'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return false; } var $optionSet = $this.parents('.option-set'); $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); // make option object dynamically, i.e. { filter: '.my-filter-class' } var options = {}, key = $optionSet.attr('data-option-key'), value = $this.attr('data-option-value'); // parse 'false' as false boolean value = value === 'false' ? false : value; options[ key ] = value; if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) { // changes in layout modes need extra logic changeLayoutMode( $this, options ); } else { // otherwise, apply new options $container.isotope( options ); } return false; }); });
