SYSTEM WEBSITE Edit : 2020.06.30 Update : 2023.06.14

Isotopeを使ってグリッドレイアウト&ソート機能をつける

動的な要素にグリッドレイアウトをさせたいとき、普段Masonryをよく使っていましたが、簡単にフィルター機能を実装できるとのことで今回はIsotopeを使ってみました。

Contents

ヘッダーでjqueryとプラグインを読み込み
HTML
JS

ヘッダーでjqueryとプラグインを読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js" charset="utf-8"></script>

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js" charset="utf-8"></script>

HTML

<div class="products__sort filters button-group js-radio-button-group" data-filter-group="type">
  <label class="button" for="all" data-filter="*">ALL</label>
  <label class="button" for="apple" data-filter=".apple">Apple Music</label>
  <label class="button" for="spotify" data-filter=".spotify">Spotify</label>
  <label class="button" for="line" data-filter=".line">LINE MUSIC</label>
</div>
<div class="products__wrap grid">
  <div class="product grid-item active apple">Apple</div>
  <div class="product grid-item spotify">spotify</div>
  <div class="product grid-item spotify">spotify</div>
  <div class="product grid-item line">LINE</div>
  <div class="product grid-item spotify">spotify</div>
  <div class="product grid-item apple">Apple</div>
  <div class="product grid-item spotify">spotify</div>
  <div class="product grid-item line">LINE</div>
  <div class="product grid-item spotify">spotify</div>
  <div class="product grid-item line">LINE</div>
  <div class="product grid-item apple">Apple</div>
  <div class="product grid-item apple">Apple</div>
  <div class="product grid-item spotify">spotify</div>
  <div class="product grid-item line">LINE</div>
  <div class="product grid-item spotify">spotify</div>
  <div class="product grid-item spotify">spotify</div>
 </div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<div class="products__sort filters button-group js-radio-button-group" data-filter-group="type">

<label class="button" for="all" data-filter="*">ALL</label>

<label class="button" for="apple" data-filter=".apple">Apple Music</label>

<label class="button" for="spotify" data-filter=".spotify">Spotify</label>

<label class="button" for="line" data-filter=".line">LINE MUSIC</label>

</div>

<div class="products__wrap grid">

<div class="product grid-item active apple">Apple</div>

<div class="product grid-item spotify">spotify</div>

<div class="product grid-item spotify">spotify</div>

<div class="product grid-item line">LINE</div>

<div class="product grid-item spotify">spotify</div>

<div class="product grid-item apple">Apple</div>

<div class="product grid-item spotify">spotify</div>

<div class="product grid-item line">LINE</div>

<div class="product grid-item spotify">spotify</div>

<div class="product grid-item line">LINE</div>

<div class="product grid-item apple">Apple</div>

<div class="product grid-item apple">Apple</div>

<div class="product grid-item spotify">spotify</div>

<div class="product grid-item line">LINE</div>

<div class="product grid-item spotify">spotify</div>

<div class="product grid-item spotify">spotify</div>

</div>

*レイアウトさせる要素に指定しているclassをボタン箇所のdata-filterに指定 *すべての場合はdata-filterに”*”を指定

JS

$(function(){
var $grid = $('.grid').isotope({
itemSelector: '.grid-item'
});

// store filter for each group
var filters = {};

$('.filters').on( 'click', '.button', function( event ) {
var $button = $( event.currentTarget );
// get group key
var $buttonGroup = $button.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $button.attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
// set filter for Isotope
$grid.isotope({ filter: filterValue });
});

// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function( event ) {
  $buttonGroup.find('.is-checked').removeClass('is-checked');
  var $button = $( event.currentTarget );
  $button.addClass('is-checked');
});
});

// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
  value += obj[ prop ];
}
return value;
}

});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

$(function(){

var $grid = $('.grid').isotope({

itemSelector: '.grid-item'

});

// store filter for each group

var filters = {};

$('.filters').on( 'click', '.button', function( event ) {

var $button = $( event.currentTarget );

// get group key

var $buttonGroup = $button.parents('.button-group');

var filterGroup = $buttonGroup.attr('data-filter-group');

// set filter for group

filters[ filterGroup ] = $button.attr('data-filter');

// combine filters

var filterValue = concatValues( filters );

// set filter for Isotope

$grid.isotope({ filter: filterValue });

});

// change is-checked class on buttons

$('.button-group').each( function( i, buttonGroup ) {

var $buttonGroup = $( buttonGroup );

$buttonGroup.on( 'click', 'button', function( event ) {

$buttonGroup.find('.is-checked').removeClass('is-checked');

var $button = $( event.currentTarget );

$button.addClass('is-checked');

});

});

// flatten object by concatting values

function concatValues( obj ) {

var value = '';

for ( var prop in obj ) {

value += obj[ prop ];

}

return value;

}

});

これだけで、フィルター機能まで実装できました。あとは、cssで見栄えを整えれば完成です。

Miki Kohinata

大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。

INDEX

PICK UP

【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。

2024.06.09 ナレッジ

Webサイトの保守メンテナンス・運用を使って、改善のプロセス化を図る

2023.05.15 ナレッジ

子供向けWebアプリケーション、UI・UXデザイン制作6つのポイント

2022.10.05 ナレッジ

KOHIMOTO

© KOHIMOTO Inc. All Rights Reserved.