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

【问题标题】：Isotope URL Hash not working when called on page load在页面加载时调用同位素 URL 哈希不起作用
【发布时间】：2015-09-22 05:17:28
【问题描述】：

我遇到了 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 方法？

【问题讨论】：

标签： jquery joomla jquery-isotope

【解决方案1】：

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

我刚刚加了

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

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

这似乎已经排序了。

【讨论】：