Webデザインのこと、いろいろ

Webデザインにまつわることを自分用にメモしています。

jQuery:プラグイン:isotope

isotope:完成版にリンク
Isotope:本家サイト
[JS]ダイナミックなアニメーションでレイアウトを変更するスクリプト -Isotope | コリス:参考サイト

f:id:sankoblog:20160718160516p:plain
f:id:sankoblog:20160718160524p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>isotope</title>
<style>
html,body,p {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family: "ヒラギノ角ゴ Pro W3",
	 "Hiragino Kaku Gothic Pro", 
	 "メイリオ", 
	 Meiryo, Osaka, 
	 "MS Pゴシック", 
	 "MS PGothic", sans-serif;
}
body {
	margin: 0 auto;
	background: #C0D0DD;
}
.box {
	float: left;
	width: 200px;
	height: 200px;
	margin: 10px;
	border-radius: 6px;
	background: #FFF;
	line-height: 200px;
	text-align: center;
	font-size: 40px;
	font-weight: bold;
}
.box2 { width: 420px; }
.box3 { height: 420px; }
.box4 {
	width: 420px;
	height: 420px;
}
</style>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.js"></script>
</head>

<body>
<div class="grid">
<div class="box box1">1</div>
<div class="box box1">2</div>
<div class="box box3">3</div>
<div class="box box1">4</div>
<div class="box box2">5</div>
<div class="box box3">6</div>
<div class="box box1">7</div>
<div class="box box4">8</div>
<div class="box box2">9</div>
<div class="box box1">10</div>
<div class="box box4">11</div>
<div class="box box2">12</div>
</div><!-- /.grid -->
<script>
// すべてisotopeのシステムに従いますよ
$('.grid').isotope({
  itemSelector: '.box',
});
</script>
</body>
</html>

f:id:sankoblog:20160718160516p:plainf:id:sankoblog:20160718160524p:plain