过滤时同位素图像加载不正确

Question

我已将 Isotope 安装到 WordPress 网站上以过滤品牌列表。除了第一次加载图像或第一次单击过滤器时，一切正常。

单击过滤器时，项目似乎可以正确过滤，但随后会从屏幕顶部重新加载以进入位置。每个过滤器都会发生这种情况，但仅在第一次单击它时发生。如果再次点击相同的过滤器，项目加载正常。

可以在http://bodyfirst.ie/damien-test 找到该问题。例如，如果您单击字母 M、N、O、P，您将看到问题。然后再次单击它们，您会看到它们看起来不错。

当用户点击全部时，问题再次出现。

我添加的脚本是

<script src="<?php echo get_stylesheet_directory_uri() ?>/js/isotope.pkgd.min.js"></script>
 <script type="text/javascript">

jQuery(document).ready(function($){
//filterable


jQuery('#portfolio_brands').imagesLoaded( function(){
    jQuery('#portfolio_brands').isotope({
        itemSelector: '.filterable_brand',
        layoutMode: 'fitRows',
        itemPositionDataEnabled: true
    });
});


jQuery('.filters li a').click(function(){

    var selector = jQuery(this).attr('data-filter');

    jQuery('#portfolio_brands').isotope({ filter: selector });

    return false;
}).filter(':first').click();


});
</script>

我只能想象这是第一次加载脚本的时候，但我不确定如何修复它，或者这是否是原因。

Answer 1

我认为可能是因为每次都在运行 imagesLoaded 函数，因此重新运行同位素初始化。

var functionRan = false;
jQuery('#portfolio_brands').imagesLoaded( function(){
    if(!functionRan) {
        jQuery('#portfolio_brands').isotope({
            itemSelector: '.filterable_brand',
            layoutMode: 'fitRows',
            itemPositionDataEnabled: true
        });
        functionRan = true;
    }
});


jQuery('.filters li a').click(function(){
    var selector = jQuery(this).attr('data-filter');
    jQuery('#portfolio_brands').isotope({ filter: selector });
    return false;
}).filter(':first').click();