網頁加載時同位素URL哈希不起作用

Question

我遇到了同位素問題，我已切換到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中，所以我也可以按用戶會話發送變量-但是我看不到這樣的同位素方法可以工作嗎？

Answer 1

事實證明，過濾是在布局完成之前發生的，因此沒有對過濾項目的最終安排。

我剛剛添加

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

文檔加載完成后，在腳本底部觸發重新安排。

這似乎已經解決了。