GREEN_KA20140125

【jQuery】サイズの違う画像をキレイに並べるならwookmarkプラグインがシンプルでめちゃ簡単!

 
今更ながら写真などの縦横サイズが決まっていない画像をPinterest風に隙間なく埋めたいってやつです。
ちょっと流行りは過ぎた感は否めないですが、写真を並べる時はどっちにしろこの形式が今のところかっこ良いですし、シンプルでオシャレなのは間違いないと思います。

 

プログラミングやWordPressを習得するのに一番近道な方法とは?



 
Pinterest風
02_Pinterest

 
しかしこれを真似ようとして普通にリストなどで画像を並べると、間が空いてしまったりで残念な感じになってしまいます…

 
残念な例
01_間とか空いちゃう例
「う〜ん、残念!カッコ悪いよ!」



 

今日はそんなPinterest風に画像をキレイに並べたい場合に、一番簡単で且つシンプルなプラグインのwookmarkの使い方を紹介します。

 

wookmarkの良いところ

これに尽きると思います。
他にも有名なpackeryとか色々と要素を隙間なく埋める系のプラグインはありますが、このwookmarkが一番シンプルで使いやすいと思います。

 

wookmarkの使い方

wookmarkサイト
ダウンロード

まずはGitHubからプラグインをダウンロードしましょう。
使用するのは「jquery.wookmark.min.js」だけでOKです。


■ HTML


■ Javascript

 
たったこれだけで…
04_キレイなサンプル
「キレイになった!」

 

でもこれだけではまだなんかちょっと足りない感じがしますし、注意点もあります。
次章以降でもうちょっと見ていきましょう。

 

wookmarkを使う際の2つの注意点

wookmarkを使う上で注意したいことが2点あります。
僕はお恥ずかしながらこの2点でちょっとつまずきました汗

 

① position: relativeを指定しないとヤバイ

 
上記のコードでサラッと書いていましたが、wookmarkで表示したい画像部分を囲っている要素に「position: relative」を指定しないと意図した箇所に画像が表示されずにデザインが崩れてしまいます。

03_囲っているDIVから外れる例
「変なとこに表示される!」

これにちょっとハマってしまいましたので、皆さんは気をつけて下さいね。

 

② load関数がIEでは使えない!

 
上記コードで「最後のタイル要素内の画像が読み込まれたら実行」とコメントしているjavascript部分ですが、load関数がIEでは使えないということに加え、読み込みの関係かちょっとうまく動かない時もありました。

何秒か待ってwookmarkを実行したりなどしてみましたが、画像の読み込みが遅れると表示がずれてしまったりとなかなかうまくいきません。
ググってみると画像を全て読み込んでから任意の処理を実行してくれるimagesLoadedというプラグインがあったので早速使ってみる。
IEも対応しているし、これで表示が崩れることもなくなりました。

imagesloadedサイト
ダウンロードは下記を参考に
05_ImagesLoaded

ちなみに使い方などは最後にまとめてコードを載せますね。

 

もうちょっとオシャレにしてみる

さあこれでやっとある程度意図した動きになりました。
しかし画像の容量が多い場合や通信環境が悪い場合に画像が表示されるまでに時間がかかってちょっと見た目がダサい感じがします。

ここでもお助けjQueryプラグインを使っちゃいます。

ImagePreloaderプラグインでオシャレに

 
ImagePreloaderプラグインサイト

06_preloader-5

このプラグインは画像読み込み中に各画像ごとにローディングのクルクル画像を表示し、ローディング完了後も画像をフワッとなめらかに表示してくれる大変ありがたいプラグインです。

 

まとめコード

ようやくそれっぽくなったので、全て入れ込んだソースを載せますね。
ちなみにHTML部分は最初のコードと変わってないので、cssとjavascript部分のみ書きます。


■ CSS


■ javascript

ハイライトされているところが新しくプラグインを入れた処理の変更点ですね。

それではよろしければデモをご確認下さい。

 

参考サイト

皆さまどうもありがとうございました!

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA