Pinterestのデザインは、要素が敷き詰められた感じになっています。
これはなんていうデザインの通称かわからないので、ひとまず「Pinterest風」と言ってます。
これを実装してくれるJavaScriptプラグインのひとつが「jQuery Masonry」なのですが、どういうものか使って試してみました。
基本的には公式サイトに載ってることを自分なりにまとめた内容となっております。
ダウンロードはこちらから
JSなどの必要なファイルは以下からダウンロードします。
設置の仕方
設置も特に難しいことはなくJavaScript読み込んでCSSで調整する感じです。
サンプルは以下から
JavaScriptの記述例
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script>
<script>
$(function(){
$('#container').masonry({ //ここには敷き詰めたい要素を囲うidなど指定します。
itemSelector : '.item' //ここに敷き詰めたい要素のclassを指定します。
});
});
</script>
HTMLの記述例
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
～ 中略 ～
</div>
サンプルでは高さを変えるため他にもclassを指定しています。
CSSの記述例
.item {
width: 220px;
height: 300px;
margin: 5px;
float: left;
border: 1px solid #ccc;
background: #eee;
box-shadow: 0 2px 1px #eee;
}
重要なのはmargin・width・floatですかね。あとは見た目を整えるようです。
これで基本的なところは完成です。
画像を並べる
画像ギャラリー的なものに使いたい場合は上記の.itemの中を画像にすればよいのですが、画像の読み込みのタイミングが遅かったりすると
レイアウトが崩れてしまうことがあるので、画像のロード後にJavaScriptを実行してくれる「imagesLoaded」というのを使います。
というわけでJavaScriptの記述を以下のように変えます。
JavaScriptの記述例
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item'
});
});
});
</script>
自分が試した感じこの理由かと思ったのですが、他の理由だったらすみません。
移動時にアニメーションをつける
リキッドレイアウトの場合、ウインドウを広げると中の要素の横並びの数が変わりますが、その際にアニメーションを付けることができます。
その場合はJavaScriptの記述を以下のように変えます。
JavaScriptの記述例
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item',
isAnimated : true
});
});
});
</script>
ぐぃーんって動きます。
ちなみにCSS3でアニメーションの実装もできます。
CSSの記述例
以下のような感じでCSSを追加します。
#container,
.item {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-ms-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}
#container {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.item {
-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-ms-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}
横幅を固定
リキッドデザインではない場合は、囲っている要素#containerなどにwidthを指定してあげれば、広がって段組が変わることは
ありません。
CSSの記述例
#container {
width: 1000px;
}
無限スクロール
次は、無限というと変ですがスクロールして下まで行った時、指定した次のページから同じ要素を持ってきて表示してくれる方法です。
まずJavaScriptをもうひとつ読み込みます。このJavaScriptファイルもダウンロードしたファイルに同梱されているかと思います。
JavaScriptの記述例
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script>
<script type="text/javascript" src="jquery.infinitescroll.min.js"></script> //追加
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item'
});
});
$container.infinitescroll({
navSelector : '#page-nav', // ページのナビゲーションを選択
nextSelector : '#page-nav a', // 次ページへのリンク
itemSelector : '.item', // 持ってくる要素のclass
loading: {
finishedMsg: 'これ以上はないのじゃ', //次のページがない場合に表示するテキスト
img: 'http://i.imgur.com/6RMhx.gif' //ローディング画像のパス
}
},
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
});
});
</script>
HTMLの記述例
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
～ 中略 ～
</div>
<nav id="page-nav">
<a href="masonry06-2.html"></a>
</nav>
これで#navのaタグのhref先のページがある限り、どんどん読み込んでくれます。ちなみに「ローディング中画像」の位置はCSSで指定するので忘れずに。
CSSの記述例
#infscr-loading {
margin-left: -100px;
width: 200px;
position: fixed;
left: 50%;
bottom: 10px;
text-align: center;
}
optionを見る限り他にも機能があるみたいですが、ここまで。
コメント