Question

Let’s say we have some block:

<div class="block"></div>

There are three sizes of block:

<div class="block b1x1"></div>
<div class="block b2x1"></div>
<div class="block b1x2"></div>

for example b1x1 is width:50px;height:50px;, b2x1 is width:100px;height:50px;

Now let’s say we have plenty of block in our website and they are totally mixed up:

<div class="block b1x1"></div>
<div class="block b2x1"></div>
<div class="block b2x1"></div>
<div class="block b1x1"></div>
<div class="block b1x1"></div>
<div class="block b2x1"></div>
<div class="block b1x2"></div>
<div class="block b2x1"></div>
.. etc

But we want to keep them tidy, imagine you playing tetris using this blocks.

So two questions:

1. How to organize block structure using CSS/JS? Any known algorithm/jquery plugin/solution? Where to start?
2. What to do when visitor will change browser window size? (see the picture)
3. What about more sizes (for ex. 3×4 etc.)

Answer 1

How about jQuery Masonry? It accomplishes what you would like with jQuery.