1. HOME
  2. 開発・ブログ運営
  3. JavaScript
  4. Masonry + imagesLoaded でタイル状に要素を整列して並べる
2012年05月05日
簡単に YouTube や mp3 を再生できる Yahoo! ...
2015年08月13日
git で簡単バックアップしてみる
2014年08月23日
これは便利!簡単に WEB 表示速度が測定出来るブックマークレ ...
2015年06月08日
Masonry + imagesLoaded でタイル状に要素 ...
2012年08月17日
JQueryで音楽再生が出来る格好いいテンプレートを見つけた ...
2014年09月23日
CSS と 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 - 2014 MacBook Air とWordPressでこうなった All rights reserved
Powered by WordPress.