0

我设置了一个 hashchange 函数来更改 div 的类并将它们加载到同位素网格中，从而允许我通过哈希 url 导航到 div。我Math.floor在那里也有一个函数，因为它的高度.grid-break是由这个决定的，总是以 230px 的间隔，所以它与网格保持一致。.click-block点击功能以正确的高度显示div .grid-break，这很棒。但是然后通过例如导航到此功能www.website.com/#thisisahash，.grid-breakdiv 出现没有高度并且出现损坏。
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的高度？或者这个小问题的任何其他解决方案？任何建议将不胜感激！

4

1 回答 1

0

math.Floor我通过在窗口加载时触发函数来解决这个问题，如下所示：

$(window).load(function(){
var $this = $('.grid-break');

        $this.css('height','auto');
        var newHeight = $this.height();
        newHeight = (Math.floor((newHeight+10)/230)+1)*230-10;
        $this.css('height',newHeight);
});
于 2013-08-08T23:04:15.367 回答