LogoMark.png

jQuery/Masonry

Masonry

jQueryプラグインMasonryを用いたタイルレイアウト

大きさの異なる複数のブロックが、タイル状に自動整列されます。ウィンドウサイズが変更されると、アニメーションしながらレイアウトを変更します。


HTML

基本形式

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

事例

CSS

基本形式

.grid-item { width: 200px; }
.grid-item--width2 { width: 420px; }

事例

2倍、3倍幅のクラスを定義することも可能です。その場合

2倍幅のwidth = itemのwidth + 余白 + itemのwidth 

とするとよいでしょう。
このとき 余白 = columnWidth - itemのwidth です。

JavaScript

基本形式

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

事例


PAGES

GUIDE

DATA

Last-modified: 2020-06-25 (木) 15:00:51