jQuery將糟糕的順序排列的div塊

Question

我正在開發一個在網格中顯示一些產品的網站。所有產品都在#Container 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和代碼

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

jquery.shuffle功能工作正常，但是當我刷新頁面下面的問題發生： 1.產品塊的總數不可見。 （每次刷新都會顯示一些內容）。 2.產品塊應放置在網格中，例如系統，例如每個下一個塊應該在前一個塊的右側浮動，依此類推。 3.塊放置在網格的下一行時，容器高度不會增加。

您可以通過訪問此URL來查看此頁： 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混洗），您的選擇tho :)