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和div 4，以達到此目的（這是預期的布局）。

不幸的是，這些項目是從外部服務接收的，所以我無法控制它們的順序（這毫無意義，因為我不知道預期的布局是什么）。

我對Isotope的fitColumn模式很幸運，這意味着它可以修復圖片中的示例，但是添加第五個元素會創建第四列，而我被迫只有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因為它已在大多數瀏覽器中得到了很好的支持 。 Grid by Example網站和視頻播放列表將有所幫助。 CSS-Tricks也有一篇不錯的文章 。