javascript - 俄罗斯方 block CSS 响应式、动态设计

Question

假设我们有一些 block :

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

现在假设我们的网站有很多 block ，而且它们完全混在一起:

<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

但我们想让它们保持整洁，想象一下您正在使用这些积木玩俄罗斯方 block 。

所以两个问题:

1. 如何使用 CSS/JS 组织 block 结构？任何已知的算法/jquery 插件/解决方案？从哪里开始？
2. 如果访问者要更改浏览器窗口大小怎么办？ (见图)
3. 更多尺寸如何(例如 3x4 等)

Answer 1

jQuery Masonry怎么样？ ？它实现了您希望使用 jQuery 实现的功能。