javascript - 使用 CSS 的动态 float 布局

Question

让我试着解释一下我想要实现的目标。我想要具有特定宽度(250 像素)设置但动态高度的 X 框放置在正文中。但我希望它们尽可能紧凑，它们之间没有不必要的空白。

现在如果所有的盒子都有相同的宽度和高度，这会很容易。例如，我可以将 float:left; 放在它们上面。但是当盒子高度是动态的，并且所有盒子都有随机高度时，我最终会在盒子之间留出空间。

让我举两个例子:

这就是我想要的:

这就是我最终得到的:

这是我的 CSS:

<style type="text/css">
<!--
body {
    background:#CCCCCC;
}
.flowBox {
    background:#FFFFFF;
    margin:10px;
    float:left;
    padding:10px;
    width:250px;
    border:#999999 1px solid;
}
.clear {
    clear:both;
}
-->
</style>

框的 HTML 示例:

<div class="flowBox">
   <h1>Header 0</h1>
   Erat volutpat. Sed rutr...
</div>

完整源代码: http://pastebin.com/UL1Nqyvm

有没有办法用 CSS 实现这一点？感谢您的帮助或指示!

Answer 1

据我之前所见，仅使用 CSS 几乎不可能实现您想要实现的目标。基本上，您想要的是类似于 Pinterest 的布局，如果您不确定我在说什么，可以查看他们的网站以获取引用。

从这里，您可以进一步研究 Pinterest 布局是如何完成的，以及是否有任何替代方案 - CSS 框架、jQuery 插件 等等。 p>

考虑到上述情况，我通过简短搜索为您找到了以下内容:

• Wookmark jQuery Plugin
• Masonry jQuery Plugin

此外，这是编写 Pinterest 布局代码的 Evan Sharp 的简短解释:

I wrote the Pinterest script. Here's the base of how it works:

Beforehand: Absolutely position the pin containers Determine column width Determine margin between columns (the gutter)

Setup an array: Get the width of the parent container; calculate the # of columns that will fit Create an empty array, with a length equaling the # of columns. Use this array to store the height of each column as you build the layout, e.g. the height of column 1 is stored as array[0]

Loop through each pin: Put each pin in the shortest column at the moment it is added "left:" === the column # (index array) times the column width + margin "top:" === The value in the array (height) for the shortest column at that time Finally, add the height of the pin to the column height (array value)

The result is lightweight. In Chrome, laying out a full page of 50+ pins takes <10ms>

从这里开始，您可以根据我提供的一些指导进一步研究该主题，或者如果您正在编写代码，您甚至可以自己实现上述解释。

虽然使用 jQuery 插件会容易得多，但如果它们适合您的情况，那只能由您来决定。