読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

Study of Web Design & Programing

フィルタリングもできるjQueryプラグイン「isotope.js」

デモ

↓別ウィンドウを開いて見る
フィルタリングもできるjQueryプラグイン|isotope.js - js do it

QRコード

※おすすめQRコード読み取りアプリ

最速QR
カテゴリ: ユーティリティ
サイズ: 1.5 MB
価格: 無料

参考

Isotope

コード

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", 
		"MS Pゴシック", 
		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;
      });

      
    });