javascript - 使 float 元素占用可用空间

Question

以前可能有人问过这个问题，但我找不到合适的搜索词来找到它。

我有一大堆 float 元素，它们看起来有点像这样:

( CodePen )

这很令人满意。不幸的是，我有一个新要求，这意味着用户可以动态更改各个元素的高度。

( CodePen )

如您所见，元素开始堆积在高元素的右侧，然后最终溢出并在左侧留下空隙。

( CodePen )

这比 float 元素要好，但仍然有很多未使用的空间。此外，我必须小心避免在这些内联元素之间的 DOM 中使用空格，以避免添加额外的间距。这很烦人。

我希望它看起来更像这样:

我更喜欢纯 CSS 解决方案，但如果必须的话，我愿意使用 JavaScript。

这是在无法访问 CodePen 的情况下生成本文中第二张图片的代码:

HTML:

<div class="container">
  <div class="floated">
  </div>
  <div class="floated">
  </div>
  <div class="floated">
  </div>
  <div class="floated">
  </div>
  <div class="floated">
  </div>
  <div class="floated">
  </div>
  <div class="floated">
  </div>
  <div class="floated height">
  </div>
  <div class="floated">
  </div>
  <div class="floated">
  </div>
  <div class="floated">
  </div>
  <div class="floated">
  </div>
  <div class="floated">
  </div>
  <div class="floated">
  </div>
  <div class="floated">
  </div>
</div>

CSS:

.container {
  width: 1200px;
}

.floated {
  float: left;
  box-sizing: border-box;
  padding: 10px;
  height: 50px;
  margin: 10px;
  width: 200px;
}

.floated::after {
  content: ' ';
  display: block;
  height: 100%;
  width: 100%;
  background: red;
}

.height {
  height: 150px;
}

Answer 1

这是我能用纯 CSS 解决方案获得的最接近的代码笔，它确实涉及更改标记但将其保留为行格式:

http://codepen.io/stufu/pen/qdpvqw

CSS

.container {
  width: 1200px;
}
.float-row { position:relative; padding:20px 0; }
.float-row:after { content:''; display:block; clear:both; height:1px; width:1px; }

.floated {
  position:absolute;
  display: block;
  box-sizing: border-box;
  padding: 10px;
  top:auto;
  height: 50px;
  margin: 10px;
  width: 200px;
}

.floated.col1{
  left:0;
}
.floated.col2{
  left:200px;
}
.floated.col3{
  left:400px;
}
.floated.col4{
  left:600px;
}
.floated.col5{
  left:800px;
}

.floated.push { top:120px; }

.floated::after {
  content: ' ';
  display: block;
  height: 100%;
  width: 100%;
  background: red;
}

.height {
  height: 150px;
}

HTML

<div class="container">
  <div class="float-row">
    <div class="floated col1"></div>
    <div class="floated col2"></div>
    <div class="floated col3"></div>
    <div class="floated col4"></div>
    <div class="floated col5"></div>
  </div>
  <div class="float-row">
    <div class="floated col1"></div>
    <div class="floated col2"></div>
    <div class="floated height col3"></div>
    <div class="floated col4"></div>
    <div class="floated col5"></div>
  </div>
  <div class="float-row">
    <div class="floated col1"></div>
    <div class="floated col2"></div>
    <div class="floated push col3"></div>
    <div class="floated col4"></div>
    <div class="floated col5"></div>
  </div>
</div>

但这不是一个很好的方法，因为每次添加高度时，您都必须考虑将 div 向下推的类(并且可能让其他人拉它)。更不用说高度是否会根据动态内容而变化。这几乎是不可能维护的。

此外，我想说的是，如果关注的是将阅读内容保持为从左到右的格式。那么，当列的大小增加时，这个想法是不是就会被抛到九霄云外？要么该列中的小行被向下推，现在最后读取，要么你将它拉到左边，现在它乱序了。

我认为这需要受到限制，难以维护，或者你会走下 isotope path这可能有点极端。