GridStack.js-將某些項目放置在特定位置，同時用填充項填充其余項目

Question

我正在嘗試使用gridstack.js動態構建瓷磚牆。 我想將某些圖塊放置在特定的位置，而其余的我只想放置在任何未占用的圖塊中。 填充圖塊將始終具有1的寬度和1的高度，但其他項可能更大。

我正在嘗試做這樣的事情：

<ul class="tiles-container">
   <!-- Specific Placement -->
   <li class="grid-stack-item" data-gs-x="1" data-gs-y="0" data-gs-width="2" data-gs-height="1">
      Some Text
   </li>
   <li class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="1" data-gs-height="2">
      Some Text
   </li>
   <!-- Filler Tiles -->
   <li class="grid-stack-item" data-gs-width="1" data-gs-height="1">
      Some Filler Text
   </li>
   <li class="grid-stack-item" data-gs-width="1" data-gs-height="1">
      Some Filler Text
   </li>
</ul>

我在頂部的所有特定展示位置都跟着填充瓷磚。 填充圖塊將沒有x和y位置。

我可以通過遍歷填充圖塊並將特定的圖塊放置在需要的地方來手動創建自己的網格，但是我希望js可以為我做這件事。

有人做過嗎？ 有辦法嗎？

Answer 1

我以前做過。 我有一個預制的網格，並且動態添加了塊。
只要這樣做：

var grid = $('.grid-stack').data('gridstack');
grid.addWidget($('<li class="grid-stack-item-content"></li>') , 0 , 0 , customWidth, customHeight , true );

這將添加塊並為其提供定義的寬度和高度。 0 , 0表示您希望將其放置在x = 0和y = 0之間的任何可能位置。
我想您將其更改為3 , 4不會對您的示例產生影響。

不過，只是一個問題，為什么您要使用列表而不是建議的div？