GridStack.js - 将一些项目放置在特定位置，同时用填充项目填充其余项目

Question

我正在尝试使用 gridstack.js 动态构建瓷砖墙。一些我想要放置在特定位置的瓷砖，而其余的我只想放置在任何未占用的瓷砖中。填充方块的宽度和高度始终为 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？

GridStack.js - 将一些项目放置在特定位置，同时用填充项目填充其余项目

GridStack.js - Placing some items in specific locations while populating the rest with filler items

javascript

gridstack