在设计上对随机块进行排序

Question

这是一种对随机块进行排序以始终保持一致性的方法。

HTML：

<div id="products" class="tab">
    <div id="all" class="tab-content">
        <div class="block"></div>
    </div>
    <!-- @end #TODOS LOS PRODUCTOS -->
    <div id="one" class="tab-content">
        <div class="block">
            <div class="item orange">
                <!-- PRODUCTO 01 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item red">
                <!-- PRODUCTO 02 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item big blue">
                <!-- PRODUCTO 03 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item big gray">
                <!-- PRODUCTO 04 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item yellow">
                <!-- PRODUCTO 05 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item green">
                <!-- PRODUCTO 06 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
        </div>
        <!-- @end .block -->
    </div>
    <!-- @end #ONE -->
    <div id="two" class="tab-content">
        <div class="block">
            <div class="item orange">
                <!-- PRODUCTO 01 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item red">
                <!-- PRODUCTO 02 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item big blue">
                <!-- PRODUCTO 03 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item big gray">
                <!-- PRODUCTO 04 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item yellow">
                <!-- PRODUCTO 05 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item green">
                <!-- PRODUCTO 06 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
        </div>
        <!-- @end .block -->
    </div>
    <!-- @end #TWO -->
    <div id="three" class="tab-content">
        <div class="block">
            <div class="item orange">
                <!-- PRODUCTO 01 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item red">
                <!-- PRODUCTO 02 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item big blue">
                <!-- PRODUCTO 03 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item big gray">
                <!-- PRODUCTO 04 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item yellow">
                <!-- PRODUCTO 05 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
            <div class="item green">
                <!-- PRODUCTO 06 -->
                <div class="imagen">

                </div>
            </div>
            <!-- @end .item -->
        </div>
        <!-- @end .block -->
    </div>
    <!-- @end #THREE -->
</div>

JS：

以下代码创建项目的副本，其他代码创建随机块。

    $("#products .tab-content").not("#all").each(function () {
            $(this).find(".block .item").clone().appendTo("#all .block");
        });

    $('#all .block').each(function () {
        var $ul = $(this);
        var $liArr = $ul.children('.item');
        $liArr.sort(function (a, b) {
            return (-1 + Math.random() * 2);
        }).appendTo($ul);
    });

这个想法总是要显示随机块，但是要保留设计

示例：

http://jsfiddle.net/ue0v3cjd/