【訂正】jQueryプラグイン「Masonry」でエラーが起きたら・・・

写真や要素をpinterest風にタイル状に配置してくれるjQueryプラグイン「Masonry」。
最近、仕事で使ってみて見事にハマってしまったので忘れないうちに対処法を書いておきます。

Masonryのダウンロード

jQueryプラグイン「Masonry」のダウンロードは下記リンク先の「Download masonry.pkgd.min.js」よりソースをダウンロードし、任意のディレクトリに保存します。

Masonry
http://masonry.desandro.com/

Masonryの設置・設定

Masonryの設置・設定は下記のリンク先が詳しく記載されているのでご覧ください。

今回ハマった点と対処【不具合・エラー】

今回は特定の要素をタイル状に配置したのですが
自分がMasonryを設定する上でハマってしまった点として、
対象の要素にfloatプロパティを設定しまったところです
対象の親子要素のfloat: left;をすべて外したところうまく動きました。

本日(2015/10/06)試してみたらfloatプロパティをつけてもうまくいきました。
※InternetExplorerだとhtmlに”overflow-y: scroll;”をつけると、余分な余白が発生してしまうのでお気をつけください。
あと、縦長要素と横長要素をうまく配置する場合は倍数を鑑みた要素の幅、高さの設定が必要です。プラグイン自体は非常に使いやすいです。是非一度お試しあれ。

 

  • Facebook
  • twitter
  • Hatena