【訂正】jQueryプラグイン「Masonry」でエラーが起きたら・・・
写真や要素をpinterest風にタイル状に配置してくれるjQueryプラグイン「Masonry」。
最近、仕事で使ってみて見事にハマってしまったので忘れないうちに対処法を書いておきます。
Masonryのダウンロード
jQueryプラグイン「Masonry」のダウンロードは下記リンク先の「Download masonry.pkgd.min.js」よりソースをダウンロードし、任意のディレクトリに保存します。
Masonry
http://masonry.desandro.com/
Masonryの設置・設定
Masonryの設置・設定は下記のリンク先が詳しく記載されているのでご覧ください。
- jQuery プラグイン Masonry の使い方と設定
- [jQuery]自動整列プラグインjQuery masonryの設定方法・オプションまとめ
- masonryでコンテンツを隙間なくレイアウトする際の表示方法のバリエーションいろいろ
- 【jqueryでタイルレイアウト】masonryの使い方
- Masonryでサイズの異なるBOXを隙間なくタイル状に整列
今回ハマった点と対処【不具合・エラー】
今回は特定の要素をタイル状に配置したのですが
自分がMasonryを設定する上でハマってしまった点として、
対象の要素にfloatプロパティを設定しまったところです。
対象の親子要素のfloat: left;をすべて外したところうまく動きました。
本日(2015/10/06)試してみたらfloatプロパティをつけてもうまくいきました。
※InternetExplorerだとhtmlに”overflow-y: scroll;”をつけると、余分な余白が発生してしまうのでお気をつけください。
あと、縦長要素と横長要素をうまく配置する場合は倍数を鑑みた要素の幅、高さの設定が必要です。プラグイン自体は非常に使いやすいです。是非一度お試しあれ。