2018年08月01日
Docker for Mac を使って WordPress の...
2018年07月29日
Docker for Mac のインストール
2018年07月08日
Docker 便利コマンドあれこれ
2018年07月08日
オライリーの Docker 本(Docker Up &...
2018年07月05日
iPad mini 2 を購入しました
2018年07月04日
Docker で Jenkins するときのあれこれ

HOME > カテゴリ(JavaScript)の記事

Masonry + imagesLoaded でタイル状に要素を整列して並べる



すっかりモバイル対応を忘れていたページをモバイル対応してみました。その一環で久しぶりの JavaScript。

ひっそりと公開している「漫画「ブラックジャックによろしく」全13巻(127話)無料配信中!」のトップページに Masonry + imagesLoaded を設置してみました。


Masonry とは?

グリッドレイアウト用の JavaScript です。ブラウザのウインドウ幅に合わせて、高さの違う要素を自動的に綺麗に配置してくれます。

実際のデモは Masonry の公式ページ自身に Masonry が設置してあるので、Masonry 公式ページを開いて、ブラウザのウインドウを狭めたり広げたりしてみてください。

私の設置ページでも動きが確認できます。


imagesLoaded とは?

Web ページの画像など要素の読み込み状態を管理できる JavaScript です。

JavaScript では、操作対象の要素の情報(高さとか幅とか)を取得してから、それらを情報を基に動作する JavaScript がありますが、要素の高さとかが可変の場合、高さが確定する前に Javascript が動き出して、ちゃんと動作しない、ということがあります。

例えば Masonry もそのひとつ。

Masonry は自動整列させる要素の高さを取得した上で、自動整列させるわけですが、Masonry のみの設置だと、自動整列させる要素の情報(高さ)を取得する前に Masonry が作動して、要素同士が重なって表示されたてしまったりすることがあるので、そうならないように imagesLoaded と組み合わせてみます。


早速実装してみる

Masonry + imagesLoaded を設置したいページの <head>内に、





を追加します。

っで、自動整列させたい要素全体を <div class=”panels”> でくくって、整列させたい要素に class=”panel” 属性を追加します。(panels と panel です)


以上で、ブラウザのウインドウサイズに応じてアニメーション付きで自動整列します。

ちょっと補足

全体をくくる panels とか 整列させる要素に付ける panel の名前は自由に決められます。<head> に設置した JavaScript の「$(‘.panels’)」(2箇所) と、’.panel’ にそれぞれ対応しているので、合わせて変更してみてください。

でわでわ。






この記事にコメントする





Copyright © 2012 - 2013 MacBook Air とWordPressでこうなった All rights reserved
Designed by Theme Junkie. Powered by WordPress.