Question

I am developing a website which display some products in a grid. All products blocks in a #Container div. I want to display the blocks in random order (shuffled) with each page refresh.

codes are:

    <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 -->

for their random orders i have used jquery.shuffle and codes are

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

jquery.shuffle function is working fine but when I refresh the page following problems are occuring:
1. Total number of products blocks are not visible. (some less are visible with each refresh).
2. product blocks should be placed in a grid like system e.g. each next block should be floated in right to previous block and so on.
3. Container height is not increasing when blocks are placed in next row of grid.

You can check this page live by visiting this url:
http://www.designforce.us/files/index.html (try refresh several times and you can see strange and funny result each time).

any advise please?

Answer 1

As mentioned in my comment, to tackle that, you could place the <br> where it should be, as follows:

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

However, seems to me this is easier to do from server side, i.e. shuffle the resulting products pulled from database and present it as is (without jquery shuffling it), your choice tho 🙂