Pinterest風のレイアウトを実現できる「Masonry」系スクリプト実装時のトラブルメモです。

タグフィルターも同時に実装

タグで表示を絞り込む案件だったので、これも同時に追加しました。

このとき困ったのが、「masonry.min.js」だと、レンガそれぞれの幅を「px」で指定しないと、フィルタリング時にうまく並んでくれないこと。

ワードプレスに内蔵されているmasonry.min.jsを使いたかったのですが、ちょっと無理でした。

「Isotope」か「Muuri」なら出来るようで、現在はとりあえずIsotopeを個人使用の範囲で試しています。

 

で、今のところ「width: calc( 25% – 15px )」みたいな指定できれいに並んでくれています。

フィルターが効かない

フィルターが機能したりしなかったり、おかしいな、と思い調べるうち、タームスラッグが日本語だと機能しないことに気が付きました。

タームスラッグを、フィルターのトリガー・ターゲットに設定していたのでこういうことが起きたのですが、スラッグをきれいに英数字にしているクライアント様なんて見たことない。

日本語名のファイルをアップロードすると英数字に変換してくれる機能（なんていうのかわかりませんが）でも動くと思いますが、多分不可逆なのでパス。

 

ここは素直に、「投稿ID」をフィルターのトリガー、ターゲットにすることで解決。

 

タグフィルター内に書いたリンクが効いてしまう

実装例を見ながらフィルターはどうにか機能してくれましたが、ページ先頭にスクロールしているのに気が付きました。

jsで、「click～ return false」としてあるので、リンクは効かないはずなのですが～

実装例では、リンク先を「#」としてあることが多いですが、コレでした。

ページ内リンクにスムーズにスクロールさせるスクリプトが処理を横取りしておりました。

「#～ って書いてあるリンクはスムースに処理するよ」という内容で、当然「#」はページ先頭に。

実際の運用ではページ内リンク以外に「<a href=”#”>」とは書かないことが殆どだと思うので、リンク先をパーマリンクにすれば解決。

小一時間悩みました。

無限スクロール（InfiniteScroll）

タグフィルターを実装するなら、無限スクロールも実装したいところですが、またまたトラブル。

自動なり、「もっと見る」ボタンなりで投稿をロードすると、見事にレンガの壁が崩れます。

「masonry.min.js」で固定幅なら行けるかな、めんどくさいな、と思いながら調べると回避策がありました。

Isotopeの公式サイトなので、先に見ておくべきでした。

https://isotope.metafizzy.co/v1/demos/infinite-scroll.html

コールバックという、いつも見て見ぬふりをしているヤツだったのですが、コピペで色々試しながら成功。

 

以上で、大体解決。

まだ、「Loading…」がチョロチョロ見え隠れして邪魔、とかフィルタリング結果が1件とか少ない場合におかしな挙動になる、とか色々残っていますが、大枠は動いた動いた。

やっと冬休みに入れる。