2018-10-05

ホームページ完成 と Masonry(Pintarest)風レイアウト と Macy.js

と言っても
お客様のHPで
完成してから しばらくたってるんですけどね・・・

完成までがこれまた なが~いなが~い道のりでした
仕事しながら 帰宅後にやってたというのもあるのですが

本当に 
よく文句も言わずに待ってていただいて
申し訳なかった と言う思いと 感謝しかありません

ちなみに こちらが 完成したホームページです

心身統一合氣道



完成後も あれこれ お直し

最近変更したのが 生徒さんの声 のページ

前から Masonry風(Pintarest風)の表示に凄く興味があって
どうなってるんだろう?とずっと思っていました
そんなとき クライアントさんから表示についてご相談をいただいたのです

レスポンシブ仕様なので
html の 書き方のパターンが決まってる
その中で どうやっていくか

元 なかなかのプログラマだった知人にも相談したけど 
応えてくれそうもないので自分で考えることに ↓↓↓

まずは phpでの対応を考えてみた
ループを何重かにして外から順番に・・・などなど
でも どうも考えが進まない

そこで 
もっとスマートな方法があるはずとネットで探す

最初はCSSで対応できないかと検索
確かに 今は Gridレイアウトや Masonryレイアウトは 
CSSで対応するのが一般的
でも CSSの新しいスタイルに対応してないOSが今もある

散々調べて 私がやりたいことは CSSでは無理かもと思った
そこで javascriptに変更して検索

そしたら すぐに見つかったのが Macy.js
これこれこれ!
私がやりたかったのは!
http://macyjs.com/





















設定も scriptも 簡単
見た目も リズム感があっていい♪
(と思ってるのは私だけ?笑 でも これは本当に素敵です)

何より 他の script の邪魔をしないというのがいい

横に並んで行き かつ ばらばらの長さで表示
次のデータは下に回りこむ
だからカラム数をこちらで決められる
(CSSでは 縦に並んでいくものがほとんどだった)

本来はこんな風に画像表示に使われてて
だから pintarest風 レイアウト とも呼ばれてるそう

次は 表示用のphp
昇順と降順との両方に対応させなくちゃならない
あるサイトのスクリプトを使ってみたら
rsoat した後 順番がばらばらになってた

そこで別の何かないかと思ったら
こちらのサイトにオーソドックスなscriptがあった
昇順・降順・ソート
http://p-ho.net/index.php?page=28

これを元にスクリプトを完成
後はurlにパラメーターをつけて分岐
見に来た人が降順・昇順を選択できるようにしてみた

ほかに参考にさせてもらったサイトは
[JS]これなら簡単!シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js
https://bit.ly/2O467oZ

また 変更したページ 生徒さんの声 の付箋風もどきはCSSで実装しています。

多くの素晴らしい情報が 無料で提供されてます。
日曜プログラマーの私にとって すべてなくてはならない情報ばかり。
そのおかげで 完成したHPがあります。
本当にありがたいです。

0 件のコメント:

コメントを投稿