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

関連記事

  1. EndlessRiver

    JavaScript

    エンドレスに流れていくコンテンツスライダー「EndlessRiver」

    EndlessRiverはエンドレスに流れていくコンテンツスライダーを…

  2. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  3. A simple jQuery Accordion with unlimited nesting

    JavaScript

    シンプルなアコーディオンを実装する「A simple jQuery Accordion with u…

    シンプルで見やすいアコーディオンを実装することができる「A simpl…

  4. no-image

    JavaScript

    水平スクロールでテキストが流れていくマーキー実装「hMarquee」

    hMarqueeは、水平スクロールでテキストが滑らかに流れていくマーキ…

  5. Ladda

    JavaScript

    ボタンとローディングアイコンが一緒になったUIを実装できるjQueryプラグイン「Ladda」

    Laddaはボタンとローディングアイコンが一緒になったUIを実装するこ…

  6. Liquid Slider

    JavaScript

    タブパネル式のレスポンシブなjQueryスライダー「Liquid Slider」

    ちょっと珍しそうなスライダーを見つけたのでご紹介します。タブパネルにも…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP