ようこそ!浜村拓夫の世界へ

    ブログ内検索

    最近の記事

    ブックマーク数の多い記事

    Blog Translation

    Powered By FC2ブログ

    Powered By FC2ブログ
    ブログやるならFC2ブログ


    FC2ブログ LOGIN

    with Ajax Amazon

    jQueryを使い、カラム数が可変の段組で、コンテンツのパネルを隙間なく並べる方法

    このエントリーを含むはてなブックマーク はてなブックマーク - jQueryを使い、カラム数が可変の段組で、コンテンツのパネルを隙間なく並べる方法 あとで読む
    タイトルが長いけど、要するに、
    リキッドレイアウトでコンテンツを配置しよう!
    という話です。

    いつも「検索デスク」(メタ検索サイト)を使っていますが、段組のカラム数や横幅が固定されていて、レスポンシブデザインじゃないんですよね。
    こういうレガシーなデザインのWebサイトを、レスポンシブデザイン+リキッドレイアウトへ変更する場合に便利なjQueryプラグインがありました。

    jQueryの利便性を、改めて実感しました!!!

    ●Smart Columns
    Smart Columns

    Smart Columns with CSS & jQuery | 設置サンプル

    ウィンドウをリサイズすると、ウィンドウサイズにぴったりフィットするようにカラムが整列します。



    ・JavaScriptで、カラム数や横幅を計算しています。
    ・カラムの縦長が、355pxに固定されています。

    Smart Columnsは、カラムの縦長が固定だったので、今回は却下。
    でも、横のカラム数や幅を計算する方法は、参考になります。


    ●Masonry
    Masonry jQuery

    Masonry jQuery 使用例

    [JS]パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry | コリス (2009-12-09)

    div要素で実装したパネルを新聞や雑誌のように隙間なく自動で配置するスクリプトを紹介します。
    カラムごとに異なる幅を指定することも可能です。
    MasonryはjQueryのプラグインのため、実装にはjquery.jsが必要です。
    ライセンスはGPLとMITで、個人・商用ともに無料で利用できるとのことです。



    公式サイト:Masonry

    What is Masonry?
    Masonry is a JavaScript grid layout library.
    It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.



    ・新聞や雑誌の紙面のように、コンテンツを隙間なく並べてくれます。
    ・縦長が不揃いのカラムも、綺麗に並べてくれます。
    ・オプションが豊富で、様々なギミック(効果)が用意されています。

    レイアウトはOKなのですが、並び替えるアルゴリズムを把握しておいた方が良いかな?
    =縦長が不揃いのカラムを並び変えたとき、自分が思っていた順番になっていない場合がありました。


    ●Wookmark
    Wookmark jQuery

    [JS]高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト -Wookmark | コリス (2012-03-27)

    高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。
    同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。

    デモではランダムな高さのパネルをレンガ状に隙間なく並べています。
    表示サイズを変更すると、それに合わせて配置も変更されます。



    公式サイト:Wookmark jQuery Plugin

    It lays out a series of elements in a dynamic column grid.



    ・画像投稿サイト「Pinterest」風のデザインに向いているでしょうか?


    ●使いどころ
    それぞれ、特徴があるjQueryプラグインですが、使いどころとして、
    ・「Smart Columns」 → カタログサイト
    ・「Masonry」 → ポータルサイト
    ・「Wookmark」 → ギャラリーサイト
    等で使い分けたら良いでしょうか?

    今回は、Masonryを採用しました。

    他にも便利なプラグインやライブラリーがあれば教えてください。
    よろしくお願いします。






    関連記事

    コメント

    コメントの投稿


    管理者にだけ表示を許可する

    トラックバック

    トラックバックURL:
    http://hamamuratakuo.blog61.fc2.com/tb.php/954-2b54206e

    FC2Ad