Question

我有一个galery，我想用同位素过滤。我想要转换的元素没有“确定”的大小，但大小取决于网格中的位置。网格看起来像这样：

 ———————————————-———————————————
|               |               |
|               |               |
 ———————————————-———————————————
|         |           |         |
|         |           |         |
 —————————-———————————-—————————
|               |               |
|               |               |
 ———————————————-———————————————
|         |           |         |
|         |           |         |
 —————————-———————————-—————————

它有两个交替的行模式。应用过滤器后，网格仍应具有相同的布局模式（当然只有较少的元素）。例如，位于第3位置（第2行的第1位置）的元素现在可以位于第1行的第1位置，因此具有新的尺寸。为了实现这种布局，我有5个类（'tile-1'到'tile-5'），它们都具有适用于它们的特定样式以及正确的边距。

我现在的问题是，在应用过滤器时，我不知道如何在同位素执行布局之前应用正确的类。我没有找到任何beforeLayout()函数或类似的东西。我尝试使用jQuery回调函数，它在动画启动时调用，如下所示：

$filters.on('click', '.filter', function() {
    var filterVal = $(this).attr('data-filter');
    $galery.isotope({
        filter: filterVal,
        animationEngine: 'jquery',
        animationOptions: {
            start: function() {
                //code that applies correct tile classes
            }
        }
    });
}

但不知怎的，这也不起作用，因为即使我强制使用animationEngine为'jquery'，函数也不会被调用。我无论如何都不确定这是否会起作用，因为我相信同位素在调用jQuery动画之前会进行内部布局。

欢迎任何帮助！

Answer 1

编辑：我意识到我的jsfiddle在Firefox中看起来很奇怪，因为我设置了填充，现在修复了。

这可能有所帮助，请参阅：http://jsfiddle.net/6st8N/4/

我认为您的HTML最初看起来像这样...... wide-2，wide-3定义宽度（如果您的代码不同，请提供示例）。

<div id="filters" class="button-group">
  <button data-filter="*">show all</button>
  <button data-filter=".metal">metal</button>
  <button data-filter=".non-metal">non-metal</button>
</div>


<div id="grid">
    <div class="grid-item wide-3 metal">
        <div class="grid-item-inner">1</div>
    </div>
    <div class="grid-item wide-3 non-metal">
        <div class="grid-item-inner">2</div>
    </div>
    <div class="grid-item wide-2 metal">
        <div class="grid-item-inner">3</div>
    </div>
    <div class="grid-item wide-2 non-metal">
        <div class="grid-item-inner">4</div>
    </div>
        <div class="grid-item wide-2 non-metal">
        <div class="grid-item-inner">5</div>
    </div>

    ...

单击过滤器后，删除与宽度相关的所有当前类，然后遍历每个匹配的网格项并重新分配类...

$('#filters').on( 'click', 'button', function() {
    var filterValue = $(this).attr('data-filter');

    var newItemCounter = 1;

    $('#grid').children(filterValue).each(function() {
        $(this).removeClass('wide-2');
        $(this).removeClass('wide-3');

        if((newItemCounter + 4)%5 == 0 || (newItemCounter +3)%5 == 0) {
            // 1st or second in pattern of 5
            $(this).addClass('wide-3');
        }

        else {
            // 3rd, 4th or 5th in pattern of 5
            $(this).addClass('wide-2');
        }

        newItemCounter++;

    })

    $container.isotope({ filter: filterValue });

});

如何在同位素开始重新布局转换之前调用函数？

1 个答案: