javascript - 使用 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 实现这一点？感谢您的任何帮助或指示！

Answer 1

从我之前看到的情况来看，您想要实现的目标即使不是不可能仅使用 CSS 也几乎是不可能的。基本上，您想要的是类似于 Pinterest 的布局，如果您不确定我在说什么，可以查看他们的网站以获取参考。

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

考虑到上述内容，我通过简短的搜索为您找到了什么：

• 书签 jQuery 插件
• 砌体jQuery插件

此外，以下是Evan Sharp 的简短解释，他为 Pinterest 布局编写了代码：

我编写了 Pinterest 脚本。这是它如何工作的基础：

事先：绝对定位销容器 确定列宽 确定列之间的边距（装订线）

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

循环遍历每个引脚：将每个引脚放在添加时的最短列“左：”===列#（索引数组）乘以列宽+边距“顶部：”===数组中的值(height) 为当时最短的一列最后加上pin的高度到列高(数组值)

结果是轻量级的。在 Chrome 中，布置一整页 50 多个图钉需要 <10ms>

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

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

Answer 2

我不确定，但我认为你可以通过“flexbox-layout”获得类似的东西http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/

问题是它是全新的东西，您可能需要更广泛的支持。

Answer 3

你试过http://masonry.desandro.com/吗？它基于 jQuery

Answer 4

你没有用纯 CSS 实现这一点，你必须使用这个 JS http://masonry.desandro.com/

Answer 5

至少据我所知，这是不可能的。CSS 定位从左到右，然后从上到下。因此，您可以向左（或向右）浮动，但不能在顶部浮动。

所以可能最简单的是一些脚本，它不应该很复杂：

1. 你的结构应该由 div 块组成，每个 250 像素宽，并且尽可能多。然后我可能会在 window.resize 处理程序中创建：

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

2. 您的原始 HTML 可以将所有块放入第一个垂直块中。然后在同一个调整大小处理程序中，您可以获取块并将它们从第一个移动到下一个。这本质上是一个两行，循环遍历元素，并执行以下操作：

   $("#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;
}

Answer 6

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

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。以前其他人已经给你链接了

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 选择器，可以更改第 2 行和第 3 行 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。

Answer 9

body {
          background:#CCCCCC;
     }

.outer-div{
           width:800px;
         }

你的innver 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>

试试这个，它会帮助你！