Javascript中具有可变大小元素的动态网格布局

Question

我知道这可能是一个经常出现的问题，但我没有找到答案的运气。

我需要为包含未知数量的可变大小元素的网格构建3列响应式布局。它们的大小限制在网格中最多3x3。

我的问题是我需要能够堆叠1行项目，但我尝试的每个插件都会在列之前填充我的行。

例如，这是使用 gridstack.js 的解决方案：

<div class="grid-stack grid-stack-3">
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: red;">1</div>
  </div>
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: green;">2</div>
  </div>  
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: green;">3</div>
  </div>
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: red;">4</div>
  </div>
</div>

var options = {
  cell_height: 267,
  vertical_margin: 26,
  width: 3
};
$('.grid-stack').gridstack(options);

正如您在图像中看到的那样，绿色元素没有按照它们应该堆叠。

为了让它们堆叠，我需要交换div 3和4，导致这个（这是预期的布局）。

不幸的是，这些物品是从外部服务收到的，所以我无法控制他们的订单（因为我无法知道预期的布局是什么，所以没有意义。）

isotope 的fitColumn模式让我很幸运，这意味着它修复了图片中的示例，但添加了第五个element创建了第四列，我被迫只有3个，所以我无法真正使用它。

以下是我需要实施的测试版面的HTML（这是我要求做的一个示例）：

<div class="grid-stack grid-stack-3">
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: red;">1</div>
  </div>
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: green;">2</div>
  </div>
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: red;">4</div>
  </div>
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: green;">3</div>
  </div>  
  <div class="grid-stack-item" data-gs-width="2" data-gs-height="3" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: blue;">5</div>
  </div>  
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: red;">6</div>
  </div>  
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: green;">7</div>
  </div>  
  <div class="grid-stack-item" data-gs-width="2" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: yellow;">8</div>
  </div> 
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: green;">9</div>
  </div> 
</div>

有人对javascript解决方案有任何想法，允许我构建这样的布局（也需要支持单列模式！）？我的选项已用完了，我想避免为此任务编写自定义解决方案，因为我对javascript没有经验。

Answer 1

查看CSS grid layout，因为它已成为大多数浏览器中的well supported。 Grid by Example网站和video playlist会有所帮助。 CSS-Tricks还有一个很好的article。