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. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

  2. Responsive Sidebar Navigation
  3. Flex-box Gallery

    JavaScript

    ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

    Flex-box Galleryは、ランダムサイズによる画像たちをかっ…

  4. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

  5. slideSpeed

    JavaScript

    スライドアップ・ダウンを設定された速度で制御できる「slideSpeed」

    slideSpeedは、特定の要素のスライドアップ・スライドダウンを設…

  6. jquery.autoscroll-text-tape

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP