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

Question

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

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

它有两种交替的行图案。应用过滤器后，网格仍应具有相同的布局模式(当然只是元素较少)。例如，位于第三个位置(第二行中的第一个位置)的元素现在可以位于第一行中的第一个位置，因此具有新的大小。为了实现这种布局，我有 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 });

});