モザイク状に画像を並べる「Mosaic Flow」
当ページのリンクには広告が含まれています。
スポンサーリンク
さまざまなサイズの画像をモザイク状に並べるプラグイン「Mosaic Flow」を紹介します。
jQueryプラグイン「Mosaic Flow」
このプラグインを使えば、Webサイト一面にさまざまなサイズ画像を並べることができます。
レスポンシブ対応で、画像にマウスオーバーすることで画像「タイトル」を表示することもできます。
スポンサーリンク
それではデモページの画面いっぱいの画像をご覧ください。
デモのソース（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>
スポンサーリンク