Question

案例：我有slideDown / slideUp div。对于启动，我的第一个div（#nav）向下滑动以选择一种语言。选择后，div会滑动，网格的div（#content）会向下滑动。我正在使用Isotope来布局网格（.section）。

问题1 ：当显示网格时，同位素元素不会彼此靠近，而是位于相同的左/上位置。当我调整窗口大小时，元素会转到他们的位置。

问题2 ：过滤器按钮不会过滤。

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

码

预加载后，主体淡入并导航向下滑动（我删除了jpreloader脚本以简化小提琴）：

$('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代码在小提琴中：http://jsfiddle.net/igorlaszlo/k9Lxota7/12/

提前致谢

Answer 1

需要在容器和触发器上触发同位素;可见的项目。否则，它无法测量一切的大小。坚持使用您的代码，可以使用visibility：hidden;而不是display：none，将你的身体和.section设置为可见性：隐藏;而不是display：none。使用jquery显示div并将css更改为visibility：visible;然后告诉同位素“布局”。如果你想在同位素中看到某些div总是可见的，那么我们就是印章方法。（参见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中

1 个答案: