MENU
CLOSE
SYSTEMWEBSITE Edit : 2020.06.25 Update : 2023.06.14

Twitter埋め込み×グリッドレイアウトIsotopeで高さを正しく取得し並ばせる方法

Contents
  1. 解決策

やりたいことは、Isotopeを使って、キャプチャのようにtwitterをタイル状に敷き詰めるということです。



この記事ではIsotopeの詳細な書き方等は割愛します。
Isotopeの使い方参考サイト


Twitterはヴィジェットを使って埋め込まれていて、その埋め込まれたTwitterに対してIsotopeで並び変えると、高さがうまく取得できずに表示崩れを起こしてしまう現象が起きました。
Twitter埋め込み参考サイト

Contents
  1. 解決策

解決策


↑の記述をjsファイルや<script>内に記載します。20~22行でIsotopeでの並び変えの指定をしていますが、”twitterのタイムラインが呼び込まれたタイミング”で機能するようにすることで解決しました。

*isotope.pkgd.jsなど必要なファイルは読み込んでいる事前提です。
*isotopeでの記述箇所をMasonry等他のjQueryプラグインの指定に変更しても使用できると思います。

Miki Kohinata

就活時代、企業で働きたくないがゆえに将来独立することを決めエンジニアの道へ。IT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。