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

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

本文关键字：填充 位置 余项 定位 js- GridStack      更新时间：2023-09-26

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

以前有人这样做过吗？有办法做到这一点吗？

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

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？

相关文章：