アンディーグリッドというjqueryプラグインを作ったんですが、色々説明するより使用イメージを貼ったほうがわかりやすいと思うのでとりあえず下の画像がアンディーグリッドを使用した時のイメージです。
これ、ぱっと見、javascriptなんて使わなくてもhtml+cssだけで作れるんじゃ・・・・
と思うかもしれませんが・・・
実際、一つ一つのブロックのwidthを%指定にしてfloatさせたり、ブレイクポイントで組み替えたりと似たようなデザインをjs（ジャバスクリプト）を使わずに表現する方法は色々あるんですが、
cssだけでこのデザインをレスポンシブに表現しようとすると、ブレイクポイントが大量に必要になってcssファイルが重くなったり、何よりcssが読みにくくなって改変作業がチョー大変になってしまします。
要素をランダムに表示させたいな・・・
組み替えの時アニメーションさせたい・・・
などの＋α 的な表現が出来るのはやっぱりjsです。
でもjsはよくわかんない・・・
という人は使ってほしいです。
どういう風に動作するかはとりあえずアンディーグリッドのページで下の方にあるデモを見てもらえれば分かると思います。
使い方はリンク先にも書いてあるのですが、
ヘッダーに下のコードを貼り付けて
＜script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"＞＜/script＞
＜script src="あなたが置いたパス/jquery.andygrid-1.3.js"＞＜/script＞
＜script＞
$(document).on("ready",function(){
$(".wrap").andygrid();
});
＜/script＞
実際に表示させたいところにこのhtmlを貼り付けるだけです。
例えばボックスを５個表示させたい場合、上のコードの「ここから ここまでを繰り返す」の間のhtmlを5回繰り返してimgタグのsrcに表示させたい画像までのパスを書くだけ。
最後にそれぞれの画像のwidthとheightの値をimgタグに書いてあげれば完成です。
imgフォルダの中のimg1.jpg img2.jpg img3.jpg img4.jpg img5.jpg という画像を表示させたい場合、以下のようになります。
それぞれ縦600px、横400pxの画像だった場合・・・
ここで注意しないといけないところは、widthとheightの値にpxをつけないこと
pxを付けるとエラーになってしまします。
そしてandygridのすごいところの一つは、縦と横の長さ。つまりwidthとheightの値がバラバラでも良いということです。
極端な話、1800px * 600px の画像や400px * 800px の画像が混在していても自動的にそれなりに綺麗に表示してくれるということです。
他にも様々なオプションが設定されており、例えば画像をランダムに表示させる機能やクリック済みの画像を半透明にする機能、スマートフォンを振ると画像をシャッフルさせる機能などたくさんの機能があり、その機能が簡単なコードをコピペするだけで実装できます。
このandygridは有料ですが、１サイトにつき年間¥200(商用サイト¥400) と安いので十分元は取れるかと思います。
また、コード自体は無料でダウンロードでき、60日間はお試し期間で無料で使用できます。
しかも料金の支払いと使用期間は自己申告制という実にゆるいので、試しにせっちしてみては？？
これ、ぱっと見、javascriptなんて使わなくてもhtml+cssだけで作れるんじゃ・・・・
と思うかもしれませんが・・・
実際、一つ一つのブロックのwidthを%指定にしてfloatさせたり、ブレイクポイントで組み替えたりと似たようなデザインをjs（ジャバスクリプト）を使わずに表現する方法は色々あるんですが、
cssだけでこのデザインをレスポンシブに表現しようとすると、ブレイクポイントが大量に必要になってcssファイルが重くなったり、何よりcssが読みにくくなって改変作業がチョー大変になってしまします。
要素をランダムに表示させたいな・・・
組み替えの時アニメーションさせたい・・・
などの＋α 的な表現が出来るのはやっぱりjsです。
でもjsはよくわかんない・・・
という人は使ってほしいです。
どういう風に動作するかはとりあえずアンディーグリッドのページで下の方にあるデモを見てもらえれば分かると思います。
使い方はリンク先にも書いてあるのですが、
ヘッダーに下のコードを貼り付けて
＜script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"＞＜/script＞
＜script src="あなたが置いたパス/jquery.andygrid-1.3.js"＞＜/script＞
＜script＞
$(document).on("ready",function(){
$(".wrap").andygrid();
});
＜/script＞
実際に表示させたいところにこのhtmlを貼り付けるだけです。
例えばボックスを５個表示させたい場合、上のコードの「ここから ここまでを繰り返す」の間のhtmlを5回繰り返してimgタグのsrcに表示させたい画像までのパスを書くだけ。
最後にそれぞれの画像のwidthとheightの値をimgタグに書いてあげれば完成です。
imgフォルダの中のimg1.jpg img2.jpg img3.jpg img4.jpg img5.jpg という画像を表示させたい場合、以下のようになります。
それぞれ縦600px、横400pxの画像だった場合・・・
ここで注意しないといけないところは、widthとheightの値にpxをつけないこと
pxを付けるとエラーになってしまします。
そしてandygridのすごいところの一つは、縦と横の長さ。つまりwidthとheightの値がバラバラでも良いということです。
極端な話、1800px * 600px の画像や400px * 800px の画像が混在していても自動的にそれなりに綺麗に表示してくれるということです。
他にも様々なオプションが設定されており、例えば画像をランダムに表示させる機能やクリック済みの画像を半透明にする機能、スマートフォンを振ると画像をシャッフルさせる機能などたくさんの機能があり、その機能が簡単なコードをコピペするだけで実装できます。
このandygridは有料ですが、１サイトにつき年間¥200(商用サイト¥400) と安いので十分元は取れるかと思います。
また、コード自体は無料でダウンロードでき、60日間はお試し期間で無料で使用できます。
しかも料金の支払いと使用期間は自己申告制という実にゆるいので、試しにせっちしてみては？？