javascript - 盒子马赛克中的特殊“浮动”

Question

我正在使用简单的 CSS 和 HTML 制作的马赛克(jsFiddle)。

马赛克具有相同宽度和高度的行和列。它的每个单元格都应该被整个盒子或其中的一部分填充。换句话说，每个盒子在长度上应该占据一个或多个盒子，在宽度上占据一个或多个盒子。

当所有的盒子只占一排时，一切正常。但是，当我尝试制作一个大于一行的盒子时，它们会float:left停止按我想要的方式工作：

如上图所示，（在 HTML 中）大框旁边的灰色框跳到下一行；我需要将框移动到红色箭头指向的位置。我的问题是：如何防止灰色框移动？

考虑到我更喜欢干净的解决方案。换句话说，使用绝对或相对定位移动框不是最佳选择，因为框及其宽度/高度是由 JavaScript 生成的（尽管可以随意发布任何答案）。

谢谢你的时间。

score 2 · Accepted Answer

你不能使用干净的 CSS 代码来做到这一点。

但是你可以使用 javascript，有一些 jQuery 插件可以做到这一点，你可以尝试Isotope

score 2 · Accepted Answer

Jquery Masonry将为您执行此操作。不幸的是，您无法通过简单的标记和 CSS 实现您所追求的目标。

2 回答 2