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中的tile有一个'itemContainer blue'类，itemListPrimary中的tile有一个'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;"

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

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

如果我从翻译3d中删除'354px'，则会将瓷砖重新排列。关于为什么要生成这个的任何想法？

Answer 1

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

Working example, forked on isotope default example

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

jQuery过滤器 - 不重组的项目（同位素）

1 个答案: