javascript jquery

Pinterest風のデザインを実現するjQueryプラグイン「The Wookmark」

eye-catch

通常、htmlの項目は規則正しく並ばせることは出来ますが、
Pinterestの様に隙間を埋めるようなことは出来ません。

[通常のhtml/css]
image02

[Pinterest風のレイアウト]
image03

 

 

jQueryプラグイン「The Wookmark」

■The Wookmarkをダウンロード

以下のサイトの右カラムにある「Download ZIP」からダウンロードします。
https://github.com/GBKS/Wookmark-jQuery

■htmlを記述

構造は、並べたい画像を全てul > liの形式で並べその上を<div>で囲っておきます。
この時、<div>にはrole属性も設定しておきます。

<div id=”main” role=”main”>
<ul id=”tiles”>
<li><img src=”img/sample01.jpg” alt=”” /></li>
<li><img src=”img/sample01.jpg” alt=”” /></li>
<li><img src=”img/sample01.jpg” alt=”” /></li>



</ul>
</div>

 

■JavaScriptを設置

ダウンロードしたzipファイルを解凍し「jquery.wookmark.js」を
ご自身のサーバにアップロードします。
(当然ながらjQueryもアップロードしておきます。)

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.wookmark.js”></script>
<script type=”text/javascript”>
(function ($){
$(‘#tiles’).imagesLoaded(function() {
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $(‘#main’), // Optional, used for some extra CSS styling
offset: 2, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
};

// Get a reference to your grid items.
var handler = $(‘#tiles li’);

// Call the layout function.
handler.wookmark(options);

// Capture clicks on grid items.
handler.click(function(){
// Randomize the height of the clicked item.
var newHeight = $(‘img’, this).height() + Math.round(Math.random()*300+30);
$(this).css(‘height’, newHeight+’px’);

// Update the layout.
handler.wookmark();
});
});
})(jQuery);
</script>

ここで注意する時は、上記の<div>よりも下に記述する必要があります。
したがって、<head>内ではなく、<body>内に記述することになります。
またオプションは、

container…ulの親要素のdivを指定
offset…要素間の余白を指定。上下左右同じ値になります。
itemWidth…要素の横幅を指定

 

■サンプル

サンプルは、どこまでもスクロールする「エンドレススクロール」の仕様になっています。

サンプル