javascript - 不移动第一个元素的同位素度假村

Question

我正在尝试实现 isotope lib 所以元素围绕我的菜单排序。经过一些研究和工具后，我选择将同位素容器中的第一个元素设置为菜单项。然后，我将其从我所做的任何操作中过滤掉，就过滤或排序而言。

我之所以选择这种方法而不是 Angular 标记方法，是因为 Angular 标记的局限性仅适用于右对齐的元素(据我了解 - 虽然我可能会错过使用它的机会......)。我希望菜单位于左上角。

我遇到的问题是随机播放。我正在尝试随机化除第一个元素(在此示例中为菜单)之外的所有元素的位置。我想将菜单保留在原位。当我尝试使用洗牌随机重新排序所有元素时，我无法从可用列表中过滤掉我的菜单项以进行洗牌。当子导航决定飞走时，这会导致一些导航问题。

这是一个示例布局:http://jsfiddle.net/ufomammut66/xwpuk/30/

到目前为止，我已经尝试过:$('.container').isotope('shuffle');

此函数只有 1 个参数 - 回调。我看不出如何在这里操纵选择过程。

我考虑过使用排序函数，但由于某些原因我无法得到:$('.container').isotope({ sortBy : 'random' }); 多次发射。即使我这样做了，我仍然看不出如何利用它来过滤我的菜单。

非常感谢任何帮助，谢谢!

编辑:更新了 jsFiddle 链接以在可排序对象上包含数字 - 有助于显示排序工作。

编辑 2: 为问题添加了更多细节。

Answer 1

我相信同位素缓存排序，因此它不必重新计算已经完成的排序。看起来它甚至“随机”执行此操作。

一个修复/破解是在随机排序之后reloadItems:

$('#reorder').click(function () {
    $('.container').isotope({sortBy: 'random'}).isotope('reloadItems');
});

演示:http://jsfiddle.net/nT66r/

至于过滤菜单项，random 只是返回一个随机数，因此您无能为力。但是，您可以编写自定义随机排序，以允许您“过滤”菜单:

getSortData: {
    name: function ($elem) {
        return $elem.data('name');
    },
    myrandom: function ($elem) {
        if($elem.hasClass('menu')) {
             return -1;   
        }
        return Math.random();
    }
}

演示:http://jsfiddle.net/PvnMn/

请注意，因为 menu 是一个类，所以如果有多个 menu 项，您可能会遇到一些奇怪的事情。如果你只有一个，身份证是更好的选择。在这种情况下，您将使用 $elem.is('#menu') 而不是 $elem.hasClass('menu')。

使用#menu:http://jsfiddle.net/PvnMn/1/

这是我尝试过滤其他类型的版本:http://jsfiddle.net/jtbowden/Vuqgu/