今日の人気記事

  1. ExcelのようにTableが編集できちゃう「Handsontable」
  2. 簡単にドロップダウンメニューがつくれる「Superfish」
  3. Tableカラム(列)にソート機能を追加「Tablesorter」
  4. テーブルのヘッダーと左カラムを固定表示「fixedTblHdrLftCol」
  5. 追尾型(オーバーレイ)広告を表示「Meerkat」

モザイク状に画像を並べる「Mosaic Flow」

スポンサーリンク

さまざまなサイズの画像をモザイク状に並べるプラグイン「Mosaic Flow」を紹介します。

jQueryプラグイン「Mosaic Flow」

このプラグインを使えば、Webサイト一面にさまざまなサイズ画像を並べることができます。

レスポンシブ対応で、画像にマウスオーバーすることで画像「タイトル」を表示することもできます。

スポンサーリンク

それではデモページの画面いっぱいの画像をご覧ください。

「Mosaic Flow」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Mosaic Flow のデモでーす。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mosaic Flow - jQueryプラグイン</title>
<style>
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.mosaicflow__column {
  float:left;
}
.mosaicflow__item {
  position:relative;
}
.mosaicflow__item img {
  display:block;
  width:100%;
  max-width:500px;
  height:auto;
}
.mosaicflow__item p {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  margin:0;
  padding:5px;
  background:hsla(0,0%,0%,.5);
  color:#fff;
  opacity:0;
}
.mosaicflow__item:hover p {
  opacity:1;
}
</style>
</head>
<body>
<h1>Mosaic Flow のデモでーす。</h1>

<div class="mosaicflow" data-item-height-calculation="attribute">
  <div class="mosaicflow__item">
    <img src="images/01-red.png" />
    <p>赤です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/02-orange.png" />
    <p>橙です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/03-yellow.png" />
    <p>黄色です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/04-green.png" />
    <p>緑です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/05-blue.png" />
    <p>青です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/06-indigo.png" />
    <p>藍です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/07-purple.png" />
    <p>紫です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/01-red.png" />
    <p>赤です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/02-orange.png" />
    <p>橙です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/03-yellow.png" />
    <p>黄色です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/04-green.png" />
    <p>緑です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/05-blue.png" />
    <p>青です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/06-indigo.png" />
    <p>藍です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/07-purple.png" />
    <p>紫です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/01-red.png" />
    <p>赤です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/02-orange.png" />
    <p>橙です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/03-yellow.png" />
    <p>黄色です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/04-green.png" />
    <p>緑です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/05-blue.png" />
    <p>青です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/06-indigo.png" />
    <p>藍です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/07-purple.png" />
    <p>紫です。</p>
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mosaicflow.js"></script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)