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？

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

1 个答案: