通常、htmlの項目は規則正しく並ばせることは出来ますが、
Pinterestの様に隙間を埋めるようなことは出来ません。
[通常のhtml/css]
[Pinterest風のレイアウト]
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…要素の横幅を指定
■サンプル
サンプルは、どこまでもスクロールする「エンドレススクロール」の仕様になっています。
