俄罗斯方块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. 如何增加尺寸（例如3x4等）

Answer 1

jQuery Masonry怎么样？它用jQuery完成了你想要的东西。

Answer 2

试试jquery插件：masonry，随心所欲http://masonry.desandro.com/