Question

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

我选择了这种方法，而不是角落标记方法，因为角落标记的限制只适用于正确对齐的元素（从我的理解 - 我可能会错过使用它虽然..）。我希望菜单位于左上角。

我遇到的问题是洗牌。我试图随机化所有元素的位置，除了第一个元素（在这个例子中是菜单）。我想把菜单放在原处。当我尝试使用shuffle随机重新排序所有元素时，我无法从可用列表中过滤出我的菜单项以进行随机播放。当子导航决定飞走时，这会导致一些导航问题。

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

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

此功能只有1个参数 - 回调。我不知道如何在这里操纵选择过程。

我考虑过使用sort函数，但由于某些原因我无法得到： $('.container').isotope({ sortBy : 'random' });不止一次开火。即使我这样做，我仍然不知道如何利用它来过滤我的菜单。

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

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

编辑2 ：添加了更多详细信息。

Answer 1

我相信同位素缓存可以排序，因此它不必重新计算它已经完成的那种。它甚至会在“随机”上做到这一点。

随机排序后修复/黑客是reloadItems：

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

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

对于过滤菜单项，随机只返回一个随机数，因此你可以做很多事情。但是，您可以编写自定义随机排序，以便“过滤”菜单：

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项，你会对自己开放一些可能的怪异。如果你只有一个，那么ID是更好的选择。在这种情况下，您可以使用$elem.is('#menu')代替$elem.hasClass('menu')。

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

这是一个版本，我正在尝试过滤其他类别：http://jsfiddle.net/jtbowden/Vuqgu/

同位素度假胜地没有移动第一个元素

1 个答案: