jQuery 以错误的顺序打乱 div block

Question

我正在开发一个在网格中显示一些产品的网站。 #Container div 中的所有产品 block 。我想在每次刷新页面时以随机顺序(打乱顺序)显示 block 。

代码是:

    <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 并且代码是

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

jquery.shuffle 函数工作正常但是当我刷新页面时出现以下问题:1.产品 block 总数不可见。 (每次刷新都看不到一些)。2.产品 block 应放置在类似网格的系统中，例如每个下一个 block 都应该 float 到上一个 block 的右边，依此类推。3. 将方 block 放置在下一行网格时，容器高度不会增加。

您可以通过访问以下网址实时查看此页面: http://www.designforce.us/files/index.html (尝试刷新几次，每次都会看到奇怪而有趣的结果)。

有什么建议吗？

Answer 1

正如我在评论中提到的，要解决这个问题，您可以放置​​ <br>它应该在哪里，如下所示:

$(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 洗牌)，您的选择:)