[み]jQuery Masonryのように要素をレンガ状に並べるjQueryプラグイン「The Wookmark jQuery plugin」

jQuery Masonryのことを調べていたら、同じように要素をレンガ状に並べるjQueryプラグインがありました。それが、「The Wookmark jQuery plugin」です。使い方も、jQuery Masonry同様にカンタンです。

WookmarkとMasonryの大きな違いは、Masonryはアニメーションで魅せるのに対し、Wookmarkはシンプルに並べ替えを行うだけです。そのくらいですかね。結果としての形はいっしょです。

「The Wookmark jQuery plugin」の使い方

ちょこっとコードを紹介します。

head内

まずはjQueryとWookmarkを読み込みます。で、どれをレンガ状に並べるのかも記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.wookmark.js"></script>
<script type="text/javascript">
    $('.items li').wookmark();
</script>

Wookmarkのダウンロードはこちらです。
GBKS/Wookmark-jQuery · GitHub

HTML

並べたい要素をulを使ってマークアップします。こんなカンジです。

<ul class="items">
    <li>........</li>
    <li>........</li>
    <li>........</li>
    <li>........</li>
    <li>........</li>
    <li>........</li>
    <li>........</li>
</ul>

Masonryとはマークアップの仕方が若干違いますね。

オプション

指定できるオプションにはこんなのがあります。

項目 説明
autoResize ブラウザのサイズが変わったときに並べなおすか
container 要素を含むコンテナを指定
CSSを効かせられます
offset 各要素間の間隔を指定
デフォルトは2
itemWidth カラムの幅を指定
デフォルトは、一番最初に読み込んだ要素の幅

オプションを使いたいときは、こんなコードになります。

$('.items li').wookmark({
    autoResize: true,
    container: $('#myContent'),
    offset: 5,
    itemWidth: 200
});

ということで、Masonryとそっくりだけど、MasonryよりもシンプルなjQueryプラグイン「The Wookmark jQuery plugin」でした。

jQueryを勉強しましょう

htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない… そんな方はきっとたくさんいますよねw でも、jQueryって、実はカンタンなんです。

でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。

なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします!

実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ!という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup