ぐわわっと移動するグリッド配置してくれるdylay.js

グリッドレイアウトで要素を配置してくれるプラグインに、ぐわわっと大きな動きで移動するjQueryプラグインdylay.jsを使ってみました。

1.dylay.jsをダウンロード

A responsive “dynamic layout” jQuery plugin.

2.jQuery本体と「dylay.js」、「jquery.easing.1.3.js」を読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/dylay.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

3.HTMLを記述

<ul id="dylay">
	<li style="width: 150px; height: 150px;" class="type_a" data-foo="3"><img src="images/img1.jpg" alt="sky1" /></li>
	<li style="width: 150px; height: 150px;" class="type_b" data-foo="5"><img src="images/img2.jpg" alt="sky2" /></li>
	<li style="width: 150px; height: 150px;" class="type_c" data-foo="2"><img src="images/img3.jpg" alt="sky3" /></li>
	<li style="width: 150px; height: 150px;" class="type_d" data-foo="1"><img src="images/img4.jpg" alt="sky4" /></li>
	<li style="width: 150px; height: 150px;" class="type_e" data-foo="4"><img src="images/img5.jpg" alt="sky5" /></li>
	<li style="width: 150px; height: 150px;" class="type_a" data-foo="3"><img src="images/img6.jpg" alt="sky6" /></li>
	<li style="width: 150px; height: 150px;" class="type_b" data-foo="5"><img src="images/img7.jpg" alt="sky7" /></li>
	<li style="width: 150px; height: 150px;" class="type_c" data-foo="2"><img src="images/img8.jpg" alt="sky8" /></li>
	<li style="width: 150px; height: 150px;" class="type_d" data-foo="1"><img src="images/img9.jpg" alt="sky9" /></li>
	<li style="width: 150px; height: 150px;" class="type_e" data-foo="4"><img src="images/img10.jpg" alt="sky10" /></li>
</ul>

<p>絞込み</p>
<ul id="filters" class="listbox">
	<li><a href="#" data-filter="*">all</a></li>
	<li><a href="#" data-filter=".type_a">type_a</a></li>
	<li><a href="#" data-filter=".type_b">type_b</a></li>
	<li><a href="#" data-filter=".type_c">type_c</a></li>
	<li><a href="#" data-filter=".type_d">type_d</a></li>
	<li><a href="#" data-filter=".type_e">type_e</a></li>
</ul>

<p>並べ替え</p>
<ul id="sorts" class="listbox">
	<li><a href="#" data-sort-by="foo">data-foo</a></li>
	<li><a href="#" data-sort-by="foo" data-sort-way="desc">data-foo desc</a></li>
</ul>

</ul>

</ul>

</ul>

4.CSSを記述

#dylay {
	margin: 0;
	padding: 0;
	list-style: none;
}
#dylay li {
	float: left;
	margin: 3px;
	font-size: 12px;
	list-style:none;
	border: 5px solid #FFF;
	border-radius: 10px;
	box-shadow:1px 2px 2px #CCC;
}
#dylay li img {
	border-radius: 10px;
}
p {
	background-color : #CCC;
	padding:10px;
	margin:10px 0;
}
.listbox {
	margin-left:10px;
}

#dylay {

margin: 0;

padding: 0;

list-style: none;

}

#dylay li {

float: left;

margin: 3px;

font-size: 12px;

list-style:none;

border: 5px solid #FFF;

border-radius: 10px;

box-shadow:1px 2px 2px #CCC;

}

#dylay li img {

border-radius: 10px;

}

p {

background-color : #CCC;

padding:10px;

margin:10px 0;

}

.listbox {

margin-left:10px;

}

5.JavaScriptを記述

<script type="text/javascript">
var $dylay = jQuery('#dylay');

// init
$dylay.dylay({
// speed of animation
	speed: 1500,
// make your animation yummy
	easing: 'easeOutElastic',
// selector to define elements
	selector: '>li'
});

// controls
jQuery('#filters a').on('click', function () {
	$dylay.dylay('filter', jQuery(this).data('filter'));	
	return false;
})

jQuery('#sorts a').on('click', function () {
	$dylay.dylay('sort', jQuery(this).data('sort-by'), jQuery(this).data('sort-way'));	
	return false;
})
</script>

var $dylay = jQuery('#dylay');

// init

$dylay.dylay({

// speed of animation

speed: 1500,

// make your animation yummy

easing: 'easeOutElastic',

// selector to define elements

selector: '>li'

});

// controls

jQuery('#filters a').on('click', function () {

$dylay.dylay('filter', jQuery(this).data('filter'));

return false;

})

jQuery('#sorts a').on('click', function () {

$dylay.dylay('sort', jQuery(this).data('sort-by'), jQuery(this).data('sort-way'));

return false;

})

</script>

以上で完成です。