javascript - 同位素过滤器和动画不起作用

Question

我目前正在一个网站上工作，white 使用 metafizzy 的同位素来对不同的图像 block 进行分类，这些图像 block 上有元素。

我搜索了很多论坛并通读了很多关于这个主题的堆栈溢出页面，但似乎没有一个答案对我有用。

这是我的 HTML:

<script src="js/modernizr-2.6.1.min.js"></script>
<script src="js-plugin/jquery/jquery-3.2.1.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/isotope.settings.js"></script>
<div class="col-sm-3" id="filtersDisplay" style="background-color:rgba(158,162,162,.5);">
                                <input type="text" id="myInput" onkeyup="mySearch()" placeholder="Search by keyword">
                                <a href="#" class="btn btn-primary">Reset</a>
                                 <ul class="filter-list" data-filter-group="subject">
                                    <li><a href="javascript:void(0)" class="btn btn-primary" data-filter="*">Show All</a></li>
                                    <li><a href="javascript:void(0)" class="btn btn-primary" data-filter=".even">Even</a></li>
                                    <li><a href="javascript:void(0)" class="btn btn-primary" data-filter=".odd">Odd</a></li>
                                    <li><a href="javascript:void(0)" class="btn btn-primary" data-filter=".prime">Prime</a></li>
                                    </ul>
                            </div>

                            <div class="col-sm-9" id="programsDisplay">
                                <section class="programsContent">
                                    <article class="program odd">
                                        <a href="images/Programs/Accounting.jpg">
                                            <figure>
                                                <img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accounting1">
                                                <span class="icons">1</span>

                                            </figure>
                                        </a>
                                    </article>
                                   <article class="program even prime">
                                        <a href="images/Programs/Accounting.jpg">
                                            <figure>
                                                <img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accounting2">
                                                <span class="icons">2</span>

                                            </figure>
                                            </a>
                                    </article>
                                    <article class="program odd prime">
                                        <a href="images/Programs/Accounting.jpg">
                                            <figure>
                                                <img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accounting3">
                                                <span class="icons">3</span>

                                            </figure>
                                            </a>
                                    </article>
                                    <article class="program even">
                                        <a href="images/Programs/Accounting.jpg">
                                            <figure>
                                                <img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4">
                                                <span class="icons">4</span>

                                            </figure>
                                            </a>
                                    </article>
                                    <article class="program odd prime">
                                        <a href="images/Programs/Accounting.jpg">
                                            <figure>
                                                <img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4">
                                                <span class="icons">5</span>

                                            </figure>
                                            </a>
                                    </article>
                                    <article class="program even">
                                        <a href="images/Programs/Accounting.jpg">
                                            <figure>
                                                <img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4">
                                                <span class="icons">6</span>

                                            </figure>
                                            </a>
                                    </article>
                                    <article class="program odd prime">
                                        <a href="images/Programs/Accounting.jpg">
                                            <figure>
                                                <img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4">
                                                <span class="icons">7</span>

                                            </figure>
                                            </a>
                                    </article>
                                    <article class="program even">
                                        <a href="images/Programs/Accounting.jpg">
                                            <figure>
                                                <img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4">
                                                <span class="icons">8</span>

                                            </figure>
                                            </a>
                                    </article>
                                    <article class="program odd">
                                        <a href="images/Programs/Accounting.jpg">
                                            <figure>
                                                <img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4">
                                                <span class="icons">9</span>

                                            </figure>
                                            </a>
                                    </article>
                                    <article class="program even">
                                        <a href="images/Programs/Accounting.jpg">
                                            <figure>
                                                <img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4">
                                                <span class="icons">10</span>

                                            </figure>
                                            </a>
                                    </article>
                           </section>
                        </div>
                    </div>                              
                </div>

                </section>

<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js-plugin/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js-plugin/owl.carousel/owl-carousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="js-plugin/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- isotope -->
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.form.js"></script>
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js-plugin/neko-share-urls/generator.js"></script>
<script type="text/javascript" src="js-plugin/parallax/js/jquery.stellar.min.js"></script>

<script type="text/javascript" src="js-plugin/appear/jquery.appear.js"></script>

<script type="text/javascript" src="js/custom.js"></script>

我最初认为可能是我将脚本放在代码的两个不同部分，但我将顶部的脚本移到了底部但没有成功。

这是我的 JS:

var $programs = $($container).isotope({

itemSelector: '.programs',
layoutMode: 'masonry'

});
$programs.imagesLoaded( function(){

$programs.isotope('layout');
});

$('.filter-list a').on('click', 'btn', function() {
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });
});
$('.programsContent').isotope({
itemSelector: '.programs',
layoutMode: 'masonry',
fitRows: {
fitWidth: true
}
});

响应有效，但过滤和动画无效。有谁知道我该如何解决这个问题？我已经解决了这个问题，似乎无法弄清楚。

谢谢!

Answer 1

首先，您还没有声明变量 $container，其次，您使用的是 ma​​sonry 布局，但添加了 fitRows ，这是行不通的。您还没有加载 imagesloaded.pkgd.min.js(它在同位素之前)并且您的同位素类是 .programs 但它是 .program

这里是一些编辑过的代码:

var $programs = $('.programsContent');

$programs.imagesLoaded( function(){
$programs.isotope({
itemSelector: '.program',
layoutMode: 'masonry',
});
});

您的过滤器代码也不正确。您调用的是点击 btn，而不是类 .btn。试试这个:

$('ul.filter-list li').on('click', 'a.btn', function() {
var filterValue = $(this).attr('data-filter');
$programs.isotope({ filter: filterValue });
});