How can I shuffle through products, without getting consecutive results from the same merchant
<p>I want to implement some kind of shuffle, so all the products of every merchant will be fairly shown on the screen. In this example I have 4 merchants and every merchant has its own ID:</p>

<ul>
<li>Merchant 1 = 4040 </li>
<li>Merchant 2 = 5050 </li>
<li>Merchant 3 = 6060 </li>
<li>Merchant 4 = 7070</li>
</ul>

<p>These id's are examples. As you can see, every merchant got an id. But every merchant got products too. </p>

<ul>
<li>Merchant 1 has 20 products</li>
<li>Merchant 2 has 5 products</li>
<li>Merchant 3 has 15 products</li>
<li>Merchant 4 has 50 products</li>
</ul>

<p>As you can see, every merchant got products, but they don't have the same amount of products. </p>

<p>So now comes the big question: <strong>How can I shuffle through all the products, so I get 40 products with an equal amount of merchants. Without getting consecutive results from the same merchant</strong>? </p>

<p>To explain my question a little bit better: 20 Products will be displayed, but I want from every merchant a product. Like this: </p>

<ul>
<li>Product 1 from merchant 1</li>
<li>Product 2 from merchant 2</li>
<li>Product 3 from merchant 3</li>
<li>Product 4 from merchant 4</li>
<li>Product 5 from merchant 1</li>
<li>Product 6 from merchant 2</li>
<li>Product 7 from merchant 3</li>
<li>Product 8 from merchant 4</li>
<li>etc…</li>
</ul>

<p>When Product 20 is reached, you get product 21, but merchant 2 has no products to display anymore. So I need to go further within merchant 3, 4 and 1 again. Once I have exhausted a particular merchants products (say merchant 2 in the example above), I would no longer need to shuffle the products of that merchant, and would be focused on the remaining.</p>

<p>I am battling with trying to conceive a design on how to do this, any help appreciated.</p>
