可変グリッドレイアウト〜jQueryを使ったデモサイト「no3design」
プレビュー
↓別ウィンドウを開いて見る
no3design
ポイント
jQuery Easing Plugin
加速・減速など動きに強弱のついたエフェクト（イージング処理）をつけられるjQueryプラグイン
jQuery Easing Plugin
jquery.vgrid.js
可変グリッドレイアウトjQueryプラグイン
可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog
↓基本
$(function(){ $("#gallery").vgrid(); });
↓イージングの種類や時間も指定可
$(function(){ $("#gallery").vgrid({ easeing: "easeOutBounce", time: 500, delay: 50 }); });
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>no3design</title> <link rel="stylesheet" href="style.css"> <link href="lightbox.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="lightbox.js"></script> <script src="jquery.easing.1.3.js"></script> <script src="jquery.vgrid.js"></script> <script src="script.js"></script> <!--[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> <div id="container"> <div id="header"> <h1><a href="#">no3<span class="deco">design</span></a></h1> <div id="nav"> <ul> <li id="nav01"><a href="">home</a></li> <li id="nav02"><a href="">about</a></li> <li id="nav03" class="current"><a href="">gallery</a></li> <li id="nav04"><a href="#">contact</a></li> </ul> </div> <div id="wrapper"> <div id="content"> <h2 id="categoryTtl">gallery</h2> <ul id="gallery"> <li><a href="http://webgaku.hotcom-web.com/images/no3design/01.png" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/01s.jpg" alt="" width="160" height="240"></a></li> <li><a href="http://webgaku.hotcom-web.com/images/no3design/02.png" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/02s.jpg" alt="" width="160" height="240"></a></li> <li><a href="http://webgaku.hotcom-web.com/images/no3design/03.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/03s.jpg" alt="" width="160" height="240"></a></li> <li><a href="http://webgaku.hotcom-web.com/images/no3design/04.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/04s.jpg" alt="" width="160" height="240"></a></li> <li><a href="http://webgaku.hotcom-web.com/images/no3design/05.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/05s.jpg" alt="" width="160" height="240"></a></li> <li><a href="http://webgaku.hotcom-web.com/images/no3design/06.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/06s.jpg" alt="" width="160" height="240"></a></li> <li><a href="http://webgaku.hotcom-web.com/images/no3design/07.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/07s.jpg" alt="" width="160" height="240"></a></li> <li><a href="http://webgaku.hotcom-web.com/images/no3design/08.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/08s.jpg" alt="" width="160" height="240"></a></li> <li><a href="http://webgaku.hotcom-web.com/images/no3design/09.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/09s.jpg" alt="" width="160" height="240"></a></li> <li><a href="http://webgaku.hotcom-web.com/images/no3design/10.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/10s.jpg" alt="" width="160" height="240"></a></li> <li><a href="http://webgaku.hotcom-web.com/images/no3design/11.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/11s.jpg" alt="" width="160" height="240"></a></li> <li><a href="http://webgaku.hotcom-web.com/images/no3design/12.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/12s.jpg" alt="" width="160" height="240"></a></li> </ul> </div> </div> <div id="footer"> <address>Copyright © 2012 no3design.</address> </div> </div> </div> </body> </html>
CSS
@charset "utf-8"; /* reset */ * { margin:0; padding:0; } img { border:none; } ul { list-style-type:none; } a:hover { text-decoration:none; } body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background-color:#eee; } #container { max-width:1000px; min-width:640px; margin:0 auto; } /* header */ #header { max-width:1000px; min-width:640px; margin:20px 0 0; } #header h1 { float:left; margin:0 0 20px; } #header h1 a { color:#000; text-decoration:none; text-shadow:1px 1px 3px #333; } .deco { color:#999; } /* nav */ #nav{ width:400px; margin:20px 0 0 0; float:right; } #nav ul li{ float:left; display:block; width:100px; height:20px; text-align:center; line-height:20px; } #nav ul li a { color:#999; text-decoration:none; } #nav ul li a:hover { text-decoration:underline; } .current { color:#000; font-weight:bold; } /* wrappaer */ #wrapper { clear:both; overflow:auto; box-shadow: 1px 1px 10px #333; -moz-box-shadow: 1px 1px 10px #333; -webkit-box-shadow: 1px 1px 10px #333; -ms-box-shadow: 1px 1px 10px #333; -moz-border-radius: 15px; -webkit-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; max-width:1240px; min-width:640px; } h2 { color:#fff; padding:20px; background-color:#1C2E3C; -moz-border-radius: 15px 15px 0 0; -webkit-border-radius: 15px 15px 0 0; -ms-border-radius: 15px 15px 0 0; border-radius: 15px 15px 0 0; } /* content */ #gallery { margin:0 auto; } #gallery li { margin:20px; width:160px; height:240px; } /* footer */ #footer { clear:both; margin:30px auto; padding:20px; text-align:center; } #footer address { font-style:normal; }
javascript
$(function(){ $("#gallery").vgrid(); });
