ウェブ学のすすめ

Study of Web Design & Programing

可変グリッドレイアウトが簡単にできるjQueryプラグイン3選

jQuery


f:id:vinton:20130324033540p:plain

可変グリッドレイアウトができるjQueryプラグインをいろいろ試したところ3つほど良さそうなものがあったのでご紹介します。可変グリッドレイアウトは写真のギャラリーサイトやポートフォリオサイトなど多くのオブジェクトを見せる際に効果的なレイアウトです。一見実装するのが難しそうですがセレクタの指定さえ間違えなければ簡単だと思います。

↓NHKスタジオパークでも可変グリッドレイアウトになっています。

NHKスタジオパーク

1. jQuery Masonry

もっとも有名なグリッドレイアウトjQueryプラグイン

jQuery Masonry


f:id:vinton:20130324033645p:plain


Demo



HTML

jquery.jsとjquery.masonry.jsを読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>jQuery Masonry Demo</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<header>
<h1>jQuery Masonry Demo</h1>
</header>
<article>
<section class="alignleft box100">
</section>
<section class="alignleft box200">
</section>
・
・
・
<section class="alignleft box100">
</section>
<section class="alignleft box100">
</section>
</article>

<footer>
<small><a href="http://webgaku.hateblo.jp">http://webgaku.hateblo.jp</a></small>
</footer>
<script src="http://webgaku.biz/js/jquery-1.7.1.min.js"></script>
<script src="http://webgaku.biz/js/jquery.masonry.min.js"></script>
</body>
</html>
CSS

特に特別なものはありません。

.box100 {
    height: 100px;
    background:#68BCBC;
}
.box200 {
    height: 200px;
    background:#71AAD7;
}
.box300 {
    height: 300px;
    background:#EBB056;
}
header {
    width:300px;
    text-align:center;
    margin:0 auto;
}
article {
    width:100%;
    margin:0 auto;
    background:#eee;
}
section {
    width: 120px;
    margin: 5px;
    overflow: hidden;
}
footer {
    width:150px;
    text-align:center;
    margin:0 auto;
}
Javascript
$(function(){
  $('article').masonry({
       itemSelector : 'section',
       isAnimated: true,
       isFitWidth: true
  });
});

2. Isotope

ソートもフィルタリングもできるjQueryプラグイン。

Isotope


f:id:vinton:20130324033717p:plain


Demo




HTML

isotopeはフィルタリングも簡単にできます。

<!-- フィルタリグする選択リスト　-->
<ul id="filters" class="option-set" data-option-key="filter">
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
<li><a href="#filter" data-option-value=".green">green</a></li>
<li><a href="#filter" data-option-value=".blue">blue</a></li>
<li><a href="#filter" data-option-value=".orange">orange</a></li>
</ul>

<!-- class名にdata-option-valueを追加します　-->
<article>
<section class="alignleft box100 green"></section>
<section class="alignleft box200 blue"></section>
<section class="alignleft box300 orange"></section>
</article>

<!-- jquery.jsとjquery.isotope.jsを読み込みます。　-->
<script src="http://webgaku.biz/js/jquery-1.7.1.min.js"></script>
<script src="http://webgaku.biz/js/jquery.isotope.min.js"></script>
CSS

Isotopeおすすめのスタイルを書いておきます。

/**** 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 */
Javascript
$(function(){
var $container = $('article');

$container.isotope({
itemSelector : 'section'
});


var $optionSets = $('header .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;
});         
});

3. Wookmark jQuery Plugin

シンプル＆軽量jQueryプラグイン

Wookmark jQuery Plugin


f:id:vinton:20130324033749p:plain


Demo



HTML

jquery.jsとjquery.masonry.jsを読み込みます。

<script src="http://webgaku.biz/js/jquery-1.7.1.min.js"></script>
<script src="http://webgaku.biz/js/jquery.wookmark.min.js"></script>
CSS

他の2つとほとんど一緒です。

Javascript
$(document).ready(new function() {
    var options = {
      autoResize: true,
      container: $('article'), 
      offset: 10, 
      itemWidth: 120
    };
 
    var handler = $('section');
       
    handler.wookmark(options);
});