在页面加载

Question

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

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

当从另一个页面中使用URL中的哈希值到达时，它确实会激活过滤，但它并没有正确隐藏其余项目 - 相反，它们都是0,0绝对值而不是隐。只有过滤后的项目才能正确布局，如此（正确过滤的项目已经模糊了一定程度的隐私）：

这是我已有的代码：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我在Joomla，所以我也有能力通过用户会话发送变量 - 但是我没有看到同样可以这样工作的同位素方法？

Answer 1

事实证明，在布局完成之前进行了过滤，因此没有最终安排过滤的项目。

我刚刚添加了

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

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

这似乎已经对它进行了分类。