絞り込み検索によるMasonryの表示崩れの解消

初めて質問させていただきます．
そのため見にくかったり欠けている部分があるかもしれません．
また独学なのでコードがめちゃくちゃかもしれません．
###現状の問題点
jQueryで2種類のチェックボックスによる絞り込み検索を実装したいと思っています．

具体的に説明します。

スキルはcategory，elementというパラメータを持ちます．
ウィンドウ下部はトグル形式のチェックボックスで，○がON，□がOFFです．
ALLを除き，ON状態では該当の色のパラメータを持つスキルが表示されます．
上段はcategory，下段はelementを示しており，段内ではOR，段同士ではAND検索を行います．
ALLを押すと他のボタンがOFFになりますが全てのスキルが表示されます．
ON状態のALLは自身か他のボタンがクリックされることでOFFになります．
スキルはクリック時にactiveが付与されます．これはいかなる状況でもhiddenしません．

現状の問題点は

いずれかの段しかクリックしていない状態だと何も表示されません．

（こちらは自己解決します）

ALL以外のボタンによってスキルを表示したあとALLを押すとスキルが重なります．

###ソースコード

js
1/*
2* チェック状態＝スキル表示
3* ALLは他のボタンと排他的に動作
4* categoryやelement内はOR検索
5* categoryとelementはAND検索
6* active状態のチップはhiddenから除外
7*/
8$(function () {
9    var masonry = new Masonry('.chip-wrapper', {
10        itemSelector: '.chip',
11        columnWidth: 192,
12        isFitWidth: true,
13        gutter: 6,
14    });
15
16    var unselected_categories = [
17        'chip__primary',
18        'chip__secondary',
19        'chip__reaction',
20        'chip__ultimate'
21    ];
22
23    var unselected_elements = [
24        'chip__physics',
25        'chip__fire',
26        'chip__burn',
27        'chip__lightning',
28        'chip__shock',
29        'chip__virus'
30    ];
31
32    $('#check-all').click(function () {
33        $('.check-list').prop('checked', false);
34        if ($(this).prop("checked")) {
35            $('.chip').removeClass('hidden');
36        } else {
37            $('.chip:not(.active)').addClass('hidden');
38        }
39        unselected_categories = [
40            'chip__primary',
41            'chip__secondary',
42            'chip__reaction',
43            'chip__ultimate'
44        ];
45        unselected_elements = [
46            'chip__physics',
47            'chip__fire',
48            'chip__burn',
49            'chip__lightning',
50            'chip__shock',
51            'chip__virus'
52        ];
53    });
54    $('input[name="check__skill-category"]').click(function () {
55        var selected_class = $(this).val();
56
57        if ($(this).prop("checked")) {
58            unselected_categories.splice($.inArray(selected_class, unselected_categories), 1);
59        } else {
60            unselected_categories.push(selected_class);
61        }
62        $('.chip').removeClass('hidden');
63        $.each(unselected_categories, function (index) {
64            $('.' + unselected_categories[index] + ':not(.active)').addClass('hidden');
65        });
66        $.each(unselected_elements, function (index) {
67            $('.' + unselected_elements[index] + ':not(.active)').addClass('hidden');
68        });
69        $('#check-all').prop('checked', false);
70        masonry.layout();
71    });
72    $('input[name="check__skill-element"]').click(function () {
73        var selected_class = $(this).val();
74
75        if ($(this).prop("checked")) {
76            unselected_elements.splice($.inArray(selected_class, unselected_elements), 1);
77        } else {
78            unselected_elements.push(selected_class);
79        }
80        $('.chip').removeClass('hidden');
81        $.each(unselected_categories, function (index) {
82            $('.' + unselected_categories[index] + ':not(.active)').addClass('hidden');
83        });
84        $.each(unselected_elements, function (index) {
85            $('.' + unselected_elements[index] + ':not(.active)').addClass('hidden');
86        });
87        $('#check-all').prop('checked', false);
88        masonry.layout();
89    });
90});

チェックボックスのinput要素の例です．

html
1<input type="checkbox" value="chip__primary" class="check-list" name="check__skill-category">
2あるいは
3<input type="checkbox" value="chip__physics" class="check-list" name="check__skill-element">

スキルのsection要素が持つクラスです．

php
1<?php
2echo "<section class=\"chip chip__ultimate chip__" . $skill_element . "\">";
3//class="chip chip__ultimate chip__fire"

レイアウトです

scss
1.chip {
2    width: $width-column;
3    margin: 0 auto;
4    margin-bottom: $gutter;
5    padding: 8px;
6    border-bottom: 3px solid;
7    border-radius: 5px;
8    background-color: $color-background;
9    &.active {
10        background-color: $color-background-active;
11        transition: all .3s;
12    }
13    .image {
14        display: block;
15        width: 100%;
16        height: $img-height;
17    }
18    .description {
19        margin: 10px;
20        line-height: 1.5;
21        text-align: justify;
22    }
23//後略

###解決したいこと

imgの高さを指定しているにも関わらず重なる不具合を直したいです．

この現象は単に窓のリサイズを繰り返すだけでは発生しませんでした．

行動規範の内容に同意します

回答1件

自己解決

Masonryを.layoutしていないという非常に単純なミスでした．
また，絞り込み検索の直感的でない部分を解消しました．

js
1$(function () {
2    var masonry = new Masonry('.chip-wrapper', {
3        itemSelector: '.chip',
4        columnWidth: 192,
5        isFitWidth: true,
6        gutter: 6,
7    });
8
9    var unselected_categories = [
10        'chip__primary',
11        'chip__secondary',
12        'chip__reaction',
13        'chip__ultimate'
14    ];
15
16    var unselected_elements = [
17        'chip__physics',
18        'chip__fire',
19        'chip__burn',
20        'chip__lightning',
21        'chip__shock',
22        'chip__virus'
23    ];
24
25    $('#check-all').click(function () {
26        $('.check-list').prop('checked', false);
27        if ($(this).prop("checked")) {
28            $('.chip').removeClass('hidden');
29        } else {
30            $('.chip:not(.active)').addClass('hidden');
31        }
32        unselected_categories = [
33            'chip__primary',
34            'chip__secondary',
35            'chip__reaction',
36            'chip__ultimate'
37        ];
38        unselected_elements = [
39            'chip__physics',
40            'chip__fire',
41            'chip__burn',
42            'chip__lightning',
43            'chip__shock',
44            'chip__virus'
45        ];
46        masonry.layout();
47    });
48    $('input[name="check__skill-category"]').click(function () {
49        var selected_class = $(this).val();
50
51        if ($(this).prop("checked")) {
52            unselected_categories.splice($.inArray(selected_class, unselected_categories), 1);
53        } else {
54            unselected_categories.push(selected_class);
55        }
56        $('.chip').removeClass('hidden');
57        $.each(unselected_categories, function (index) {
58            $('.' + unselected_categories[index] + ':not(.active)').addClass('hidden');
59        });
60        if (unselected_elements.length < 6) {
61            $.each(unselected_elements, function (index) {
62                $('.' + unselected_elements[index] + ':not(.active)').addClass('hidden');
63            });
64        }
65        $('#check-all').prop('checked', false);
66        masonry.layout();
67    });
68    $('input[name="check__skill-element"]').click(function () {
69        var selected_class = $(this).val();
70
71        if ($(this).prop("checked")) {
72            unselected_elements.splice($.inArray(selected_class, unselected_elements), 1);
73        } else {
74            unselected_elements.push(selected_class);
75        }
76        $('.chip').removeClass('hidden');
77        if (unselected_categories.length < 4) {
78            $.each(unselected_categories, function (index) {
79                $('.' + unselected_categories[index] + ':not(.active)').addClass('hidden');
80            });
81        }
82        $.each(unselected_elements, function (index) {
83            $('.' + unselected_elements[index] + ':not(.active)').addClass('hidden');
84        });
85        $('#check-all').prop('checked', false);
86        masonry.layout();
87    });
88});