根据高度包裹水平？

Question

我正在使用layout horizontal wrap根据其大小和容器找到一些项目。这些物品有不同的尺寸，所以有时我会在它们下面留下很多空间。

如果我向你展示情况的草图，那就更好了......

我的相关代码如下：

<style>
  .high {
      height: 200px;
    }

    .low {
      height: 50px;
    }

    .object {
      min-width: 200px;
    }
</style>
<div class="layout horizontal wrap" style="height:auto" id="container">
  <div class="object high">
    <p>1</p>
  </div>
  <div class="object low">
    <p>2</p>
  </div>
  <div class="object low">
    <p>3</p>
  </div>
  <div class="object low">
    <p>4</p>
  </div>
</div>
<script type="text/javascript">
  $(function() {

      $("#container").sortable({
        cursor: "move"
      });
    });
</script>

这些元素是可排序的，因此用户可以移动它们。无法使用固定位置的解决方案。

是否可以使用polymer-shadow解决此问题？ 有什么想法吗？

我做了plnkr where you can reproduce it

更新

当我得到一些使用浮点数的建议时，我遇到了一些难以解释我遇到的问题，我正在添加一个新的草图来显示可能的目标。注意用户如何移动大项目两侧的小项目。

Answer 1

如果元素的高度是动态的，那么浮点数并不总是如你所见，但如果你可以说宽度保持不变，你可以添加一些JS来移动元素以使其更合适< / p>

这是一个显示结果http://jsbin.com/xeyife

的js bin

在这个要点中，我做了一段时间后，js被包裹在角度

中

https://gist.github.com/MrAntix/c4edb6a14c9d419bfc44#file-index-html-L90

基本上你循环遍历按左像素值

在列中对它们进行分组的元素

var column='_'+left;

列的高度被存储起来，每次添加元素时，都会增加列高的高度

columns[column]+=height;

并通过设置边距来提升元素，从而缩小差距

cellElement.css({marginTop:(columns[column]-top)+'px'});

你只能用JS和CSS

来做这件事

顺便说一句。我不确定css flex会在这里提供帮助，因为你的元素需要在同一个容器中