no-image

JavaScript

高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

jQuery Mosaic pluginは高さを揃えたレスポンシブな画像ギャラリーを実装できるjQueryプラグインです。アスペクト比を維持しながら綺麗に高さを均一化させた画像ギャラリーを実装したい人は要チェックです。

jQuery Mosaic plugin

デモ

デモでは画像が複数行にわたって並べられています。各行の高さはそれぞれで均一になっていて、綺麗に整列されています。画面いっぱいに隙間なく画像が並べられるその姿は圧巻ですね。

また、デモはレスポンシブにも対応しています。画面を縮小していくと画像のレイアウトもそれに合わせて変化していきます。スマホやタブレット、PCなど、その機器にあったレイアウトで快適に閲覧できます。

使い方やマークアップもかなりシンプルなところがグッドです。

オプションには、maxRowHeight、refitOnResize、refitOnResizeDelay、defaultAspectRatio、maxRowHeightPolicy、highResImagesWidthThreshold、outerMargin、innerGap、responsiveWidthThresholdといった項目が用意されています。

jQuery Mosaic plugin

dndod依存性のないシンプルで簡単なモーダルライブラリ「dndod」前のページ

シンプル・軽量なjQueryイメージビューア「WimmViewer」次のページno-image

関連記事

  1. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  2. FakeLoader.js

    JavaScript

    フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js

    FakeLoader.jsはフルスクリーンでカッコいいローディングアニ…

  3. Letter Drop

    JavaScript

    雨のように文字が落ちてくるアニメーションのjQueryプラグイン「Letter Drop」

    Letter DropというjQueryプラグインを使えば、雨のように…

  4. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  5. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  6. JavaScript

    JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方

    ちょっとした備忘録です。よく見るセレクトボックスから各項目を選択するだ…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP