jQuery过滤器 - 项目不重新组织（同位素）答案

【问题标题】：jQuery filter - items not re-organising (isotope)jQuery过滤器 - 项目不重新组织（同位素）
【发布时间】：2015-09-10 07:55:42
【问题描述】：

我的页面结构如下：

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

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

显然，每个图块的“左：364px”增量，每行的“顶部：0px”也是如此，但是当应用过滤器时，样式是这样的（对于同一个图块）：

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

如果我从 translate 3d 中删除“354px”，则图块会重新对齐。关于为什么会产生这种情况的任何想法？

【问题讨论】：

两个 div 都有 id="itemListLeading"......你确定这是对的还是你的意思是第二个 div 有 id="itemListPrimary "
对不起，是我的错误。
编辑您的问题进行上述更改
完成。我尝试了不同的同位素“layoutModes”，但它们只是弄乱了样式。
我已经更新了问题的潜在原因。

标签： javascript jquery html jquery-isotope masonry

【解决方案1】：

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

Working example, forked on isotope default example

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

【讨论】：