LogoMark.png

jQuery/Masonry

Masonry

https://masonry.desandro.com/

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; }

JavaScript

基本形式

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

PAGES

GUIDE

TOOL

DATA

Last-modified: 2021-09-25 (土) 11:32:51