使用CSS实现动态浮动布局

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实现这个的方法？感谢任何帮助或指导！

- jamietelin

Answer 1

根据我以前所见，如果不使用CSS以外的东西，你想要实现的东西几乎不可能或者根本不可能。基本上，你想要的是一个类似于Pinterest的布局，如果你不确定我在说什么，可以参考他们的网站。

从这里开始，你可以更深入地研究Pinterest布局是如何完成的，以及是否有任何替代方案 - CSS框架、jQuery插件等等。

根据我的搜索结果，以下是符合你需求的内容：

-Wookmark jQuery Plugin -Masonry jQuery Plugin 此外，这里是Evan Sharp为Pinterest布局编写代码的简短解释。

我编写了Pinterest脚本。以下是其基本工作原理：

预先：绝对定位图钉容器，确定列宽，确定列之间的边距。

设置一个数组：获取父容器的宽度；计算适合的列数，创建一个空数组，长度等于列数。使用此数组在构建布局时存储每列的高度，例如第1列的高度存储为array[0]。

循环遍历每个图钉：将每个图钉放入当前最短的列中，"left:" === 列号（索引数组）乘以列宽+边距，"top:" === 此时最短列的数组值（高度）。最后，将图钉的高度添加到列高（数组值）中。

结果轻巧。在Chrome中，布置50多个图钉的完整页面只需<10ms>。

您可以通过进一步研究上述解释或自己实现来深入了解该主题，如果您喜欢编程。

虽然使用jQuery插件会更容易，但如果它们适合您的情况，那就由您决定。

- user1372494

---

很棒的答案！来自Pinterest的Even Sharp有趣的故事。 Masonry jQuery插件轻松解决了问题，运行得非常好。使用Masonry的新源链接：http://pastebin.com/peNpKRRj - lejahmie

很高兴我能帮到你。最好的部分是，这个小研究对我也有所收获。祝你好运！ - user1372494

Answer 2

您不能仅使用纯CSS实现此功能，需要使用以下JS库：http://masonry.desandro.com/

- sandeep

---

我用Photoshop实现了它;) 但是谢谢，Masonry似乎是解决问题的好方法。 - lejahmie

Answer 3

我不确定，但我认为你可以使用“flexbox-layout”来实现类似的效果 http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/

问题在于它是相当新的东西，你可能需要更广泛的支持。

- Cmorales

---

太糟糕了，新的东西要被广泛接受和支持总是需要很长时间。无论如何都是好阅读！谢谢！ - lejahmie

我曾经收藏过这篇文章，也许对你有用：http://www.the-haystack.com/2012/01/04/learn-you-a-flexbox/。关于支持，也许有一些 polyfill 可以使用？ - Cmorales

Answer 4

您尝试过使用基于jQuery的http://masonry.desandro.com/吗？

- rt2800

---

我已经解决了这个问题。谢谢！使用Masonry的新源链接：http://pastebin.com/peNpKRRj - lejahmie

Answer 5

据我所知，这是不可能的。CSS定位是从左到右，从上到下工作的。因此，您可以向左（或向右）浮动，但不能向上。

因此，最简单的方法可能是一些脚本编写，而且它并不复杂：

1. Your structure should consists of div blocks, each 250px wide, and as many as fits. I would possibly create then in the window.resize handler:

   $(window).resize(function() 
   {
       // ... 
   }
   

2. Your original HTML can place all of your blocks into the first vertical block. Then in the same resize handler you can take the blocks and move them from the first into the next one. This is essentially a two-liner, looping through the elements, and doing something something like this:

   $("#FlowBox" + i)
       .appendTo("#VerticalBlock" + (i % number_of_vertical_blocks) );
   

CSS 大致如下：

.verticalBlock {
    background:#CCCCCC;
    margin:10px;
    float:left;
    padding:10px;
    width:250px;
    border:#999999 1px solid;
}
.flowBox {
    background:#CCCCCC;
    padding-top:10px;
}

- zmilojko

---

有人能解释一下为什么我现在能够将我的代码示例格式化为代码吗？我已经快要失去耐心了！上面的 JQuery 片段就是不想被格式化为代码，而 CSS 则可以…… - zmilojko

当在列表中时，每行都必须缩进额外的四个空格。 - thirtydot

Answer 6

好问题！我尝试过几次，但成功率不同，并且仅使用CSS是不可能的。我唯一能给你的提示是：这是一个打包问题，有jQuery脚本可以解决！

- Hans Wassink

Answer 7

尝试这个，可能会对你有所帮助

HTML

<div class="left"> 
    <div class="flowBox">
            <h1>Header 0</h1>
             erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
    <div class="flowBox">
        <h1>Header 4</h1>
        am, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
</div>
<div class="left">
    <div class="flowBox">
            <h1>Header 1</h1>
            es vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
    <div class="flowBox">
        <h1>Header 5</h1>
        s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
</div>
<div class="left">
    <div class="flowBox">
            <h1>Header 2</h1>
            illa at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
    <div class="flowBox">
        <h1>Header 6</h1>
        eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
</div>
<div class="left">
    <div class="flowBox">
            <h1>Header 3</h1>
            ngilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
    <div class="flowBox">
        <h1>Header 7</h1>
         dolor sit amet, consectetur adipiscing elit. Sed magna ligula, fringilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
</div>
<div class="clear"></div>   

CSS

body {
        background:#CCCCCC;
}
.flowBox {
        background:#FFFFFF;
        margin-bottom:10px;      
        padding:10px;
        width:250px;
        border:#999999 1px solid;
}
.left { float:left;  margin:10px;}
.clear {
        clear:both;
}

等等…… 在这种情况下，你可能可以这样做，但这不是正确的方法。或者你必须使用Javascript来完成。之前其他人已经给了你链接。

- Jhilom

Answer 8

您可以使用CSS3来实现这个功能：

body {
-moz-column-count: 4;
-moz-column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
column-count: 4;
column-gap: 20px;
height: 800px; //breaks the column into new ones
}

但目前仅受Firefox、Safari和Chrome（新版本）支持。

它不会按照您的顺序排列，而是将0->1->2->3放在第一列而不是横跨。

使用CSS选择器，可以更改第二行和第三行div，并且可以设置它们的新位置，但无法告诉上面div的位置，因此，除非使用JavaScript，否则无法将其移动到正确的位置。

考虑以下示例：

body>div.flowBox:nth-of-type(5n) {
    /* alter position of every 5th flowBox */
    position: relative;
    top: -200px; /* how can you tell how much? */
}
body>div.flowBox:nth-of-type(6n) {
    /* alter position of every 6th flowBox */
}
/* and so on */
...

您可以设置位置，但无法确定要设置的位置，因为没有办法获取其他元素的属性。因此，您需要使用JavaScript。

- Ozzy

Answer 9

body {
          background:#CCCCCC;
     }

.outer-div{
           width:800px;
         }

你的内部 div

.flowBox {
           background:#FFFFFF;
           margin-bottom:10px;      
           padding:10px;
           width:250px;
           border:#999999 1px solid;
          }


.left  { float:left;  margin:10px;}
.clear { clear:both;}

HTML 代码：

<div class="outer-div">
<div class="left flowBox">
    <h1>Header 1</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
<div class="left flowBox">
    <h1>Header 2</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 3</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 4</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 5</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 6</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 7</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 8</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
</div>

试试这个，它会帮助你的！

- khurram