javascript - 将各种形状的 div 一起 float 成行

Question

我有一个大的包含元素，里面有大约十个 DIV - 大多数平均宽度约为 300 像素，并且都设置为向左浮动。最终结果是一个小部件/网格类型的布局。但是，这种样式是专门为响应式设计而构建的 - 我们使用媒体查询来根据设备调整大小和列数。

问题是我们可能有一个或两个双宽或双高的盒子。双倍宽度并没有真正导致 float 问题(我无论如何也无法解决)但问题是双倍高。双高会扩展到下一行，但会阻止其他盒子漂浮在它的左侧。 Float-right 不是一个选项，因为高框不可能总是在右边。

我正在尝试找到一种方法来动态找出每个 block 可以漂浮到哪里，就像解决拼图一样。我看过一些 javascript，如 Masonry、jLayout 等，但它们要么不起作用，要么不能解决不规则框的问题。

所以:

1. 我想避免绝对定位任何东西，因为我们每次都必须为每个元素重新定位，而且它们不会让人感觉流畅。
2. 我需要允许双宽和双高，但它们可能并不总是存在，最终，用户应该能够确定它们的位置，因此我们不能总是只根据已知位置编写 javascript。
3. 我试过通过 jQuery 在元素周围移动，这确实有效，但必须在窗口调整大小时完成，这是太多的事件，当您在需要三列的宽度上转换时，会导致元素来回闪烁四。
4. 使用 css3 列是行不通的，因为 DIV 被视为文本并在传递到下一列时被分成两部分，这也不允许双倍宽度。

有没有人有什么想法或建议？

Answer 1

使用 Jquery Masonry 或 Isotope，它会将所有容器排列成最节省空间的排列方式(或者如果您使用同位素，您可以摆弄它以优先考虑其他形式的排列方式)