0

我正在尝试使用 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 会为我做到这一点。

有没有人这样做过？有没有办法做到这一点？

4

1 回答 1

0

我以前做过。我有一个预制的网格，我动态添加块。
只需这样做：

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？

于 2016-03-24T13:38:14.613 回答