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

jQuery filter - items not re-organising (isotope)

本文关键字：项目 同位素 新组织 过滤器 jQuery      更新时间：2023-09-26

我有一个页面，它的结构是这样的:

<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"类。下面的过滤器相应地过滤条目，但是网格没有响应，tile也没有重新组织。

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

另一个位置的砌体配置设置了容器宽度等，我猜我需要在项目被过滤后调用;然而，我不确定如何。这可以根据需要提供，我只是不想用太多的脚本来填充它。

我想我找到了问题，但是我不知道如何修改。当页面被加载时，网格是正常的。tile的样式如下所示。

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

如果我从translate 3d中删除'354px'，瓷砖会重新排列在一起。有人知道为什么会产生这个吗?

为什么不想为grid创建一个父元素，并将项作为子元素呢?然后你可以用固定的第一项进行过滤。为第一个元素增加一个item-lead类，必须固定，并在var selector = $(this).data('filter');后添加selector+=", .item-lead";

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

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

相关文章：