使用CSS的动态浮动布局

Question

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

现在如果所有盒子都有相同的宽度和高度,这将很容易.我可以举个例子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插件等等.

考虑到上述因素,我通过简短的搜索找到了你:

• Wookmark jQuery插件
• Masonry jQuery插件

此外,以下是Evan Sharp撰写Pinterest布局代码的简短说明:

我写了Pinterest脚本.以下是它的工作原理:

事先:绝对定位销容器确定列宽确定列之间的边距(排水沟)

设置数组:获取父容器的宽度; 计算适合的列数#创建一个空数组,其长度等于列数.在构建布局时使用此数组存储每列的高度,例如,列1的高度存储为数组[0]

遍历每个引脚:在添加"left:"时将每个引脚放在最短列中===列#(索引数组)乘以列宽+边距"top:"===数组中的值(高度)当时最短列最后,将引脚的高度添加到列高(数组值)

结果很轻.在Chrome中,布局一整页50多个引脚需要<10ms>

您可以通过我提供的略微指导进一步研究该主题,或者如果您正在编写代码,您甚至可以自己实现上述解释.

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