javascript - jQuery 过滤器 - 项目不重新组织(同位素)

Question

我有一个具有如下结构的页面:

<div id="k2Container"> <!--sets K2 Category Layout-->
    <div class="itemList"> <!--Contains the items loaded-->
        <div id="itemListLeading"></div> <!--contains one tile that is always first-->
        <div id="itemListPrimary"></div> <!--contains the rest of the tiles-->
    </div>
</div>

itemListLeading 中的图 block 具有“itemContainer blue”类，itemListPrimary 中的图 block 具有“itemContainer red”类。下面的过滤器会相应地过滤项目，但网格不响应并且图 block 不会重新组织。

<ul id="filters">
    <li><a href="#" data-filter="*">All sizes</a></li>
    <li><a href="#" data-filter=".red">Wide</a></li>
    <li><a href="#" data-filter=".blue">High</a></li>
    <li><a href="#" data-filter=".green">Small</a></li>
</ul>

<script>
    $(function() {
        var $container = $('#k2Container');     
        $container.isotope({
            itemSelector: '.itemContainer',
            masonry: {
                columnWidth: '#blank-item'
            }
        });

        $('#filters').on('click', 'a', function() {
            var selector = $(this).data('filter');
            $container.isotope({
                filter: selector,
                layoutMode: 'masonry'
            });
        });

    });
</script>

另一个位置的 masonry 配置设置了容器宽度等，我猜我需要在过滤项目后调用它；但我不知道怎么做。这可以根据要求提供，我只是不想用太多的脚本来增加它。

更新

我想我已经找到了问题，但我不知道如何修改它。当页面加载时，网格很好。瓷砖的样式如下。

style="position: absolute; left: 728px; top: 0px; width: 354px;"

显然，每个图 block 的“left: 364px”都会递增，每行的“top: 0px”也会递增，但应用过滤器时，样式是这样的(对于同一图 block ):

style="position: absolute; left: 728px; top: 0px; width: 354px; transform: translate3d(354px, 0px, 0px);"

如果我从翻译 3d 中删除“354px”，图 block 会重新彼此相邻对齐。关于为什么会产生这种情况有什么想法吗？

Answer 1

为什么你不想为网格创建一个父元素，并将项目作为子元素？然后您可以使用固定的第一项进行过滤。为第一个元素添加一个“item-lead”类，该类必须是固定的，并在 var selector = $(this).data( 之后添加 selector+=", .item-lead"; '过滤器');.

Working example, forked on isotope default example

如果我不完全理解你的问题，请原谅，但我认为我的方法比将网格分成两部分更容易。 ;)