我正在开发一个在网格中显示一些产品的网站。 #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 (尝试刷新几次，每次都会看到奇怪而有趣的结果)。
有什么建议吗？
最佳答案
正如我在评论中提到的，要解决这个问题，您可以放置 <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 洗牌)，您的选择:)
关于jQuery 以错误的顺序打乱 div block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9899956/