我设置了一个 hashchange 函数来更改 div 的类并将它们加载到同位素网格中,从而允许我通过哈希 url 导航到 div。我Math.floor
在那里也有一个函数,因为它的高度.grid-break
是由这个决定的,总是以 230px 的间隔,所以它与网格保持一致。.click-block
点击功能以正确的高度显示div .grid-break
,这很棒。但是然后通过例如导航到此功能www.website.com/#thisisahash
,.grid-break
div 出现没有高度并且出现损坏。
jQuery:
$(document).ready(function () {
$(window).hashchange(function () {
var hash = location.hash;
if (hash) {
var element = $('.click-block[data-hook="' + hash.substring(1) + '"]');
if (element) showDetail(element);
}
});
$(document).ready(function () {
$(document).hashchange();
var $container = $('#main-grid, #news-grid, .main-grid');
$(function () {
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.grid-block, .grid-break, .hidden',
animationEngine: 'best-available',
filter: '*:not(.hidden), .grid-block',
masonry: {
columnWidth: 8,
gutterWidth: 25
}
});
});
});
$(".click-block").click(function () {
document.location.hash = $(this).attr('data-hook');
});
});
function showDetail(element) {
var newHeight = $('#post-' + element.attr('data-hook')).height();
$('#post-' + element.attr('data-hook')).removeClass('hidden').addClass('grid-break').delay(300).fadeIn('slow');
newHeight = (Math.floor((newHeight + 10) / 230) + 1) * 230 - 10;
$('#post-' + element.attr('data-hook')).css('height', newHeight);
element.children('.up-arrow').fadeIn('slow');
setTimeout(function () {
$('html, body').animate({
scrollTop: $('#post-' + element.attr('data-hook')).offset().top - 90
}, "slow");
}, 1500);
$('#main-grid').isotope();
}
});
.grid-break
有没有办法在将div 添加到同位素网格并因此出现损坏之前计算 div的高度?或者这个小问题的任何其他解决方案?任何建议将不胜感激!