2

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

我选择了这种方法而不是角戳方法，因为角戳的限制只适用于右对齐的元素（据我了解 - 我可能会错过使用它..）。我希望菜单位于左上角。

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

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

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

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

我考虑过使用排序功能，但由于某种原因我无法得到： $('.container').isotope({ sortBy : 'random' });多次触发。即使我这样做了，我仍然不知道如何利用它来过滤掉我的菜单。

任何帮助将不胜感激，谢谢！

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

编辑 2：添加了更多的问题细节。

4

1 回答 1

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/

于 2013-02-27T00:33:40.673 回答