我目前正在一个网站上工作白色实现了metafizzy的同位素来对不同的图像块进行排序，这些图像块上面有元素。
我搜索了很多论坛并阅读了很多有关此主题的堆栈溢出页面，但似乎没有任何答案对我有用。
这是我的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
}
});
响应性有效，但过滤和动画不起作用。 有谁知道如何解决这个问题？我已经把这个问题打得很干，似乎无法弄明白。
谢谢！
答案 0 :(得分：0)
首先，您尚未声明变量$container，其次，您正在使用砌体布局，但在其中添加 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 });
});