同位素 URL 哈希在页面加载时调用时不起作用

Question

我遇到了 Isotope 问题，我已切换到 URL 哈希过滤方法，因为我需要能够将访问者发送到已启用过滤器的页面。

当我正常使用过滤器时 - 即页面加载未过滤并且单击按钮激活过滤器时，一切都按预期工作。

当从另一个带有 URL 中的散列的页面到达时，它确实激活了过滤，但它没有正确隐藏剩余的项目 - 相反，它们都聚集在 0,0 绝对并且没有隐藏。只有过滤后的项目布局正确，就像这样（为了一定程度的隐私，正确过滤的项目已经模糊）：

这是我已有的代码：

<script>
(function( $ ){
 
 
 function getHashFilter() {
  var hash = location.hash;
  // get filter=filterName
  var matches = location.hash.match( /filter=([^&]+)/i );
  var hashFilter = matches && matches[1];
  return hashFilter && decodeURIComponent( hashFilter );
 }
 
 
 $( function() {

  var $container = $('.blogGrid');

  // bind filter button click
  var $filters = $('.filter-button-group').on( 'click', 'button', function() {
   var filterAttr = $( this ).attr('data-filter');
   // set filter in hash
   location.hash = 'filter=' + encodeURIComponent( filterAttr );
  });
  
  var isIsotopeInit = false;
  
  function onHashchange() {
   var hashFilter = getHashFilter();
   if ( !hashFilter && isIsotopeInit ) {
    return;
   }
   isIsotopeInit = true;
   // filter isotope
   $container.isotope({
    itemSelector: '.blogItem',
    percentPosition: true,
    layoutMode: 'fitRows',
    filter: hashFilter
   });
   // set selected class on button
   if ( hashFilter ) {
    $filters.find('.is-checked').removeClass('is-checked');
    $filters.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
   }
  }
  
  $(window).on( 'hashchange', onHashchange );
  // trigger event handler to init Isotope
  onHashchange();
 });
 
})( jQuery );
</script>

我在 Joomla 中，所以我也可以通过用户会话发送变量 - 但我看不到可以那样工作的 Isotope 方法？

Answer 1

事实证明过滤是在布局完成之前发生的，所以没有过滤项目的最终排列。

我刚刚添加了

$(document).ready(function(){
    $container.isotope();
});

到脚本底部以在文档加载完成后触发重新排列。

看来已经解决了。

同位素 URL 哈希在页面加载时调用时不起作用

Isotope URL Hash not working when called on page load

jquery

joomla

jquery-isotope