同位素向下滑动 div

Question

案例：我有slideDown/slideUp div个。为了启动，我的第一个 div (#nav) 向下滑动以选择一种语言。选择后，div 向上滑动，网格的 div (#content) 向下滑动。我正在使用 Isotope 来布置网格 (.section)。

问题1：显示网格时，同位素元素并没有靠得很近，而是都在同一个left/top位置。当我调整 window.

大小时，元素会回到它们的位置

问题2：过滤按钮没有过滤。

问题：如何在不调整屏幕大小的情况下让元素正确定位以及我的过滤器代码有什么问题按钮不起作用？

代码

预加载后主体淡入并且导航向下滑动（我删除了 jpreloader 脚本以使 fiddle 更简单）：

$('body').hide();

$('body').fadeIn(300);
// language nav is shown initially
$('#nav').animate({'top':300}, 2000, 'easeOutElastic');

当导航按钮被点击时，它向上滑动，内容div随着导航按钮一起向下滑动:

$('#fr').click(function(e) {
    e.preventDefault();
    $('#francais').delay(1700).slideDown(800);
    $('#nav').slideUp(800);
    $('#call-nav').animate({'top':20}, 1000, 'easeOutElastic');
});
$('#call-nav').click(function(e) {
    e.preventDefault();
    $('#nav').delay(1700).slideDown(800);
    $('#francais').slideUp(800);
    $(this).animate({'top':-80}, 1000, 'easeOutElastic');
});

同位素函数（初始化、过滤、选择按钮）：

// init Isotope
$('.section').isotope({
    itemSelector: '.box',
    percentPosition: true,
    masonry: {
        columnWidth: '.box-sizer'
    }
});
// bind filter button click
$('#filters').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $(this).addClass('is-checked');
    });
});

HTML 和 CSS 代码在 fiddle 中：http://jsfiddle.net/igorlaszlo/k9Lxota7/12/

提前致谢

Answer 1

同位素需要在可见的容器和物品上触发。否则，它无法测量所有事物的大小。坚持你的代码，可以通过使用 visibility: hidden; 来解决这个问题。而不是 display:none，将你的 body 和 .section 设置为 visibility: hidden;而不是 display:none。使用 jquery 显示 div 并将 css 更改为 visibility: visible;然后告诉同位素"layout"。如果你想让某些 div 在同位素中始终可见，那么我们可以使用 stamp 方法。（请参阅 jsfiddle）。您的过滤器代码正在调用函数并使用您尚未定义的变量 ($container, filterFnctns)。

这是一个 jsfiddle，其中包含上述所有更改

代码：

$('body').hide().css('visibility', 'visible');

$('.section').isotope({
    itemSelector: '.box',
    percentPosition: true,
    stamp: '.stamp',
    masonry: {
        columnWidth: '.box-sizer'
    }
});

$('body').fadeIn(300);
// init Isotope
$('.section').isotope('layout');
// bind filter button click
$('#filters').on('click', 'button', function () {
    var filterValue = $(this).attr('data-filter');
    // use filterFn if matches value

    $('.section').isotope({
        filter: filterValue
    });
});
// change is-checked class on buttons
$('.button-group').each(function (i, buttonGroup) {
    var $buttonGroup = $(buttonGroup);
    $buttonGroup.on('click', 'button', function () {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $(this).addClass('is-checked');
    });
});
// language nav is shown initially
$('#nav').animate({
    'top': 300
}, 2000, 'easeOutElastic');

$('#fr').click(function (e) {
    e.preventDefault();
    $('#francais').delay(1700).slideDown(800);
    $('#nav').slideUp(800);
    $('#call-nav').animate({
        'top': 20
    }, 1000, 'easeOutElastic');
    $('.section').hide().css('visibility', 'visible');
    $('body').fadeIn(300);
});
$('#call-nav').click(function (e) {
    e.preventDefault();
    $('#nav').delay(1700).slideDown(800);
    $('#francais').slideUp(800);
    $(this).animate({
        'top': -80
    }, 1000, 'easeOutElastic');
});

同位素向下滑动 div

Isotope in down slided div

jquery

jquery-isotope