jQuery以错误的顺序洗牌div块

我正在开发一个网站，在网格中显示一些产品。容器分区中的所有产品块。我希望在每次页面刷新时以随机顺序显示这些块

代码为：

    <div id="Container"> 
        <div id="product1" class="product_wrap">
            <div class="image">
                <a class="fancybox-effects-a" title="" href="products/shirts/pictures/image1.png">
                    <img src="products/shirts/pictures/image1.png" alt="product" width="260" height="235" />
                </a>
            </div>
            <div class="details">
                <p class="Price">$ 150.00</p>
                <h2 class="Title">T-Shirt Brand</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
            </div> <!-- // details -->

            <div class="form"> 
                <p>Select size:</p>
                <select name="sizeSelect"> 
                    <option>Small</option>
                    <option>Medium</option>
                    <option>Large</option>
                </select>
                <button class="btnCart" type="button"></button>
            </div> <!-- // form -->
            <br clear="all" />
        </div> <!-- // product_wrap -->

        <div id="product2" class="product_wrap">
            <div class="image">
                <a class="fancybox-effects-a" title="" href="products/shirts/pictures/image2.png">
                    <img src="products/shirts/pictures/image2.png" alt="product" width="260" height="235" />
                </a>
            </div>
            <div class="details">
                <p class="Price">$ 150.00</p>
                <h2 class="Title">T-Shirt Brand</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
            </div> <!-- // details -->

            <div class="form"> 
                <p>Select size:</p>
                <select name="sizeSelect"> 
                    <option>Small</option>
                    <option>Medium</option>
                    <option>Large</option>
                </select>
                <button class="btnCart" type="button"></button>
            </div> <!-- // form -->
        </div> <!-- // product_wrap -->

        <div id="product3" class="product_wrap">
            <div class="image">
                <a class="fancybox-effects-a" title="" href="products/shirts/pictures/image3.png">
                    <img src="products/shirts/pictures/image3.png" alt="product" width="260" height="235" />
                </a>

            </div>
            <div class="details">
                <p class="Price">$ 150.00</p>
                <h2 class="Title">T-Shirt Brand</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
            </div> <!-- // details -->

            <div class="form"> 
                <p>Select size:</p>
                <select name="sizeSelect"> 
                    <option>Small</option>
                    <option>Medium</option>
                    <option>Large</option>
                </select>
                <button class="btnCart" type="button"></button>
            </div> <!-- // form -->
        </div> <!-- // product_wrap -->

        <div id="product4" class="product_wrap">
            <div class="image">
                <a class="fancybox-effects-a" title="" href="products/shirts/pictures/image1.png">
                    <img src="products/shirts/pictures/image1.png" alt="product" width="260" height="235" />
                </a>
            </div>
            <div class="details">
                <p class="Price">$ 150.00</p>
                <h2 class="Title">T-Shirt Brand</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
            </div> <!-- // details -->

            <div class="form"> 
                <p>Select size:</p>
                <select name="sizeSelect"> 
                    <option>Small</option>
                    <option>Medium</option>
                    <option>Large</option>
                </select>
                <button class="btnCart" type="button"></button>
            </div> <!-- // form -->
        </div> <!-- // product_wrap -->

        <div id="product5" class="product_wrap">
            <div class="image">
                <a class="fancybox-effects-a" title="" href="products/shirts/pictures/image2.png">
                    <img src="products/shirts/pictures/image2.png" alt="product" width="260" height="235" />
                </a>
            </div>
            <div class="details">
                <p class="Price">$ 150.00</p>
                <h2 class="Title">T-Shirt Brand</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
            </div> <!-- // details -->

            <div class="form"> 
                <p>Select size:</p>
                <select name="sizeSelect"> 
                    <option>Small</option>
                    <option>Medium</option>
                    <option>Large</option>
                </select>
                <button class="btnCart" type="button"></button>
            </div> <!-- // form -->
        </div> <!-- // product_wrap -->

        <div id="product6" class="product_wrap">
            <div class="image">
                <a class="fancybox-effects-a" title="" href="products/shirts/pictures/image3.png">
                    <img src="products/shirts/pictures/image3.png" alt="product" width="260" height="235" />
                </a>

            </div>
            <div class="details">
                <p class="Price">$ 150.00</p>
                <h2 class="Title">T-Shirt Brand</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
            </div> <!-- // details -->

            <div class="form"> 
                <p>Select size:</p>
                <select name="sizeSelect"> 
                    <option>Small</option>
                    <option>Medium</option>
                    <option>Large</option>
                </select>
                <button class="btnCart" type="button"></button>
            </div> <!-- // form -->
        </div> <!-- // product_wrap -->

        <br clear="all" />
    </div> <!-- // Container -->

jquery.shuffle函数工作正常，但当我刷新页面时，出现了以下问题： 1.产品块的总数不可见。每次刷新时都会看到一些不太清晰的内容。 2.产品块应放置在类似网格的系统中，例如，下一个块应浮动到上一个块的右侧，以此类推。 3.在网格的下一行中放置块时，容器高度不会增加

您可以通过访问以下url实时查看此页面： 尝试刷新几次，每次都可以看到奇怪和有趣的结果

---

有什么建议吗？

正如我在评论中提到的，要解决这个问题，您可以将它放在应该放的地方，如下所示：

$(document).ready(function() {
   $('#Container').shuffle();

   // remove all clears
   $('#Container').find('br').remove();

   // insert <br clear="all" /> after every 3th product
   $('#Container').find('.product_wrap:nth-child(3n)').after('<br clear="all" />');
});

---

然而，在我看来，这在服务器端更容易做到，也就是说，洗牌从数据库中提取的结果产品，并按原样呈现，而不需要jquery洗牌，您的选择tho:

这是因为您的网格没有正确地洗牌，所以您的网格会根据isI同意您的位置随机清除。在我看来，从服务器端执行此操作更容易，但项目要求与javascript有关：@HafeezAnsari正在搁置我的案例：非常感谢您在修复项目错误方面的帮助。

$(document).ready(function() {
   $('#Container').shuffle();

   // remove all clears
   $('#Container').find('br').remove();

   // insert <br clear="all" /> after every 3th product
   $('#Container').find('.product_wrap:nth-child(3n)').after('<br clear="all" />');
});