Masonryでの自動整列サンプル1

ウインドウの横幅をいろいろ変化させてみて下さい。 その都度、アニメーション効果と共に、下記の「キャプション付き写真」が再配置されます。
このページでは、(記述が推奨されているものも含めて)オプションを1つも記述しない状態でMasonryを使用しています。 もし、各ボックスが重なって見える場合は、このページ末尾の注釈をご参照下さい。

※このページを最初に表示した際、各ボックスが重なり合って見える場合があります。その場合でも、ウインドウサイズを変化させれば、正しく表示されます。 そのような表示になる原因は、おそらく「基準になるボックスのサイズ」の指定を省略しているため、その判断が上手くいかなかったのだと考えられます。 「Masonry」では、オプションを使って「基準になるボックスのサイズ」を指定することが推奨されているため、できるだけそれを記述するようにした方が良いでしょう。 その記述方法は、記事本文中で解説していますので、そちらをご参照下さい。

記事に戻る