masonry

jQuery(function($){

$(window).on(‘load’, function() {

$(‘.grid’).masonry({
// options
itemSelector: ‘.grid-item’,
columnWidth: ‘.grid-item’,
stagger: 30
});
});

});

画像の読み込みが終わってから動かさないと、外側の縦幅の計算がうまくいかない。
親要素のクラスに「grid」、子要素のクラスに「grid-item」(上のサンプルだとそうなる)と設定すること。

http://cly7796.net/wp/javascript/started-with-masonry/

コメントを残す

メールアドレスが公開されることはありません。