JS初心者ですが、画面レイアウトについての質問です。

Question

多少JAVAをかじったことがありますが、この度、JSをやることになりました。
そこで質問ですが、**このアパレルサイト**のように
ウィンドウを縮めた時にレイアウトが移動するような仕組みを作りたいと思っています。

仕組みというか大体どういう発想で作られているのか教えて頂けないでしょうか。
各ブロックの幅を最初に調べて、ウィンドウ幅は○になったら○する。とかでしょうか？
具体的なコードなどがあれば簡易的で結構ですので教えていただけると助かります。

Answer 1

予想です。
以下のようにwindowのサイズ変更のイベントを検知して、都度レイアウトの調整をしているのでは無いでしょうか。(効率的に)

        window.onresize = function(event) {
            console.log('windowのサイズが変更されたよ') ;
        };

Comments

[Anoaji]

お返事ありがとうございます。参考になりました。

[Anoaji]

お返事ありがとうございます。参考になりました。

Answer 2

jQueryプラグインのjQuery VGridによって動作しています。
下記、記事等で詳細は記載されているので、ご確認ください。

http://www.ad-a-type.com/engineers/?p=5
http://blog.xlune.com/2009/09/jqueryvgrid.html

Comments

[Anoaji]

お返事ありがとうございます。参考になりました。

Answer 3

そういう時は、そのページのソースを見て<script src="..."></script>のファイル名でググるといいです。

そういうわけでググってみましたが、これを使ってるみたいですよ。
可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog

Comments

[Anoaji]

お返事ありがとうございます。参考になりました。