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中的图块具有“ itemContainer蓝色”类，而itemListPrimary中的图块具有“ itemContainer红色”类。 下面的过滤器会相应地过滤项目，但是网格没有响应，并且图块也没有重新组织。

<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>

另一个位置的砖石结构设置了容器的宽度等，我猜一旦项目被过滤后我就需要调用它。 但是我不确定如何。 可以根据要求提供它，我只是不想用太多的脚本来扩展它。

更新

我想我已经找到问题了，但是我不确定如何修改它。 加载页面后，网格就可以了。 磁贴的样式如下。

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

显然，每个图块的'left：364px'递增，每一行的'top：0px'递增，但是当应用过滤器时，样式是这样的（对于同一图块）：

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

如果我从平移3d中删除了“ 354px”，则图块会彼此重新对齐。 为什么会产生这种想法？

Answer 1

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

工作示例，在同位素默认示例上分叉

如果我不能完全理解您的问题，请原谅，但是我认为我的方法比将网格分为两部分要容易得多。 ;）