JavaScript/jQuery

[javascript]異なる高さをきれいに揃える「The Wookmark jQuery plugin」紹介

[javascript][/javascript]異なる高さをきれいに揃える「The Wookmark jQuery plugin」紹介

異なる高さの要素をきれいに整列してくれるプラグイン「The Wookmark jQuery plugin」
をご紹介します。
マガジンやGallery系のサイト制作する時などにとても活躍してくれます。

ダウンロード

http://www.wookmark.com/jquery-plugin

上記のサイトからダウンロードします。

使い方

「head内」

[html]<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.wookmark.js"></script>
<script type="text/javascript">
$(‘#gallery li’).wookmark();
</script>[/html]
「html」
[html]<ul id="gallery">
<li><img data-cke-saved-src="" src="" ></li>
</ul>[/html]

jqueryと一緒にダウンロードした、wookmark.jpを読み込みます。
リストなどにidをふり、ヘッダー内でセレクタを設定します。

これでOKです。
参考サイト

http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-wookmark.html

是非参考にしてみてください。