Coding GALLERY

BLOGのアイキャッチ画像をMasonry(レンガ積み)表示にして、
tagごとに表示させてタブ切り替え表示にしてGALLERYページを作ってみました。
WordPressとCSSとJSで実装できました。
ただMasonryレイアウトに手こずってしまって、
結局軽く仕上げるためにgrid使ってCSSだけで実装しました。
flexboxだと縦に隙間が空いてしまってタイル状にならないし、
jqueryプラグインは重いので、gridに落ち着きました。
ただ無限スクロールを実装したら、gridの縦の隙間を埋める機能が裏目に出て、
一番右の列に新しい画像が追加され続けるという謎仕様になってしまった。
(ただ隙間なく綺麗には並べられます)
しかし右にだけ追加されるのはちょっと意味が分からないので、
「もっと見る」ボタンを設置して、追加されるものを囲ってひとまとまりにして下に表示させてます。
そうすると新しく追加された部分の縦の隙間は生じますが、
個人的に気にならないのでこれで完成にしました。
HPに繋げています。
全然更新してなかったから、これでBLOG更新すると自動的に更新される。
次はオーダーアイテムページも実装したいんですが、
まずオーダーアイテムのマスターデザイン・パターンを作り上げなきゃいけないのでまだ時間がかかるかな。

ここ何日かは、トップスとジャケットの自己補正の作図起こしてました。
パターン引いたのでこれから作っていきます。
その前にトラウザーズも作図引き直したい。

LillianOtto Designer BLOG