俄羅斯方塊CSS響應，動感的設計

Question

比方說，我們有一些塊：

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

有三種尺寸的block：

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

例如b1x1是width:50px;height:50px;，b2x1爲width:100px;height:50px;

現在讓我們說我們的網站有很多塊，他們完全混淆：

<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 

但是我們想讓他們整齊一點，想象一下，使用這個模塊玩俄羅斯方塊。

所以兩個問題：

1. 如何使用CSS/JS組織塊結構？任何已知的算法/ jquery插件/解決方案？從哪兒開始？
2. 訪問者將更改瀏覽器窗口大小時該怎麼辦？ （見圖片），怎麼樣更多尺寸（爲前。3×4等）

Answer 1

如何jQuery Masonry？它完成了你想要的jQuery。

Answer 2

嘗試jQuery插件：masonry，做你想做http://masonry.desandro.com/