Sort random blocks on the design

It was a way to sort the random blocks to always maintain uniformity.

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:

The following code creates a duplicate of the item and the other code creates random blocks.

    $("#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);
    });

The idea is always to display random blocks but with an order to keep the design

EXAMPLE:

http://ift.tt/1E9t9ia