Question

我有10个元素都使用类.item我想要做的是将这些元素混合到一个新的顺序中，然后为它们分配另一个类。

我想要实现的是布局，其中元素可以跨越33.33333333%或66.66666666%（即1/3或2/3）。问题在于，还有许多规则要遵守。

一行有3种设置，

1) 3 X 1/3
2) 1 x 1/3 + 1 x 2/3
3) 1 x 2/3 + 1 x 1/3

现在我无法弄清楚如何为我的元素分配类来维护这些规则，我也不关心规则的顺序是什么，因为在同一行上永远不会有2 x 2/3。

到目前为止，我已设法将我的元素随机播放（目标1完整）。感谢另一个Stackoverflow帖子，

jQuery.fn.shuffle = function () {
        var j;
        for (var i = 0; i < this.length; i++) {
            j = Math.floor(Math.random() * this.length);
            $(this[i]).before($(this[j]));
        }
        return this;
    };

但是我不知道如何添加我需要的其他类（.item__w-1或.item-w-2）并坚持确保行上的元素总是加起来的规则3/3。

Answer 1

jQuery.fn.shuffle = function () {
    var getRandomInt = function (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    };

    var l = this.length;
    var i = 0;

    for (i = 0, j = 0; i < l; i++) {
        j = getRandomInt(0, l);

        $(this[i]).before($(this[j]));
    }

    var reloaded = $(this.selector);
    for (i = 0, weight = 0, currentWeight = 1; i != l; ++i) {
        currentWeight = 1 + getRandomInt(0, 2 - weight);

        $(reloaded[i]).addClass('item__w-' + currentWeight);

        weight = weight + currentWeight < 3 ? weight + currentWeight : 0;
    }

    return this;
};

我以为你也想要随机课程。它是如何工作的：在洗牌之后，再次迭代它们。从1 - 3范围中选择随机类（您可以将其更改为您想要的任何最大值，如果您不想要全权重元素，则选择2）。确保总是有总计为3的项目。

http://jsfiddle.net/Misiur/QCjvR/

用jquery随机化布局

1 个答案: