読者です 読者をやめる 読者になる 読者になる

ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

MasonryからFreetile.jsに変更@jQuery

Sponsored Links

グリッドレイアウトで要素をタイル状に敷き詰めるのにjQuery MasonryNHKスタジオパークで知名度がグンと上がったあれですね)を使って実装を進めてたんですが、自分の設定がうまくないのかWebkit系ブラウザ(とくにSafari)で表示が崩れてしまい、その原因がなかなか突き止められないもんでFreetile.jsに切り替えました。(そしたらスッキリ解消できたので)

jQuery Masonryだと、とくにSafariで初回にページを開いた際、以下のように表示が崩れてしまいました。ブラウザをリロードすると解消したりもするんですが(何回もリロードしないとダメなときも)これではもちろん納品出来ません。

f:id:showjinx:20160504112247j:plain

columnWidthの設定をして、その値から小中大の異なる要素のサイズをcssで指定したので問題はないとは思うんですが(他の原因かもしれませんが)どうにも原因が分からず、これ以上ここに時間をかけていられない事情もあり、他の実装方法を探してFreetile.jsに辿り着きました。(ちなみにIEやFirefoxではこの表示崩れは発生しませんでした)

一度使ったことのあるWookmarkにしようかと思ったんですが、今回の案件では並べる要素の高さだけでなく幅も異なるのでこれは却下。(Wookmarkでは幅は統一しないといけないようで、たぶん)

Freetile.jsは存在も知らなかったんですが、デモで確認できるように異なる幅でもうまいことタイリングしてくれるようです。

f:id:showjinx:20160504112414p:plain

使い方はとっても簡単でした。githubからzipファイルをダウンロード。

https://github.com/yconst/Freetile

展開して、中に入っているjquery.freetile.min.jsを使います。

jQuery本体と合わせて使用したいhtmlで読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/vendor/jquery.freetile.min.js"></script>

あとはfreetileを起動させるメソッドを記述して、タイリングさせる要素名を指定するだけです。

<script>
jQuery('#container').freetile({
     selector: '.topic'
});
</script>

この場合、タイリングさせる要素群を内包する親要素が#containerで、タイリングさせる対象要素が.topicです。

jQuery Masonryで必要だったcolumnWidthのオプションや、既に指定済みのcssの書き換えもとくに必要とせずに済みました。

f:id:showjinx:20160504112622j:plain

今回は時間がなかったのでプラグインを乗り換えましたが、原因がこのまま分からないのも悔しいので突き止めたいです。すっごい初歩的なところとかで何か見落としがあるような気が。。。