Question

我正在使用此JS库-Magic Grid向页面上的项目添加漂亮的布局。这是正文：

<div id="grid" class="container">
   <div class="row">
       <div class="item1"></div>
       <div class="item2"></div>
       <div class="item3"></div>
       <div class="item4"></div>
   </div>
</div>
// Magic Grid:
<script>
   let magicGrid = new MagicGrid({
     container: "#grid", // Required. Can be a class, id, or an HTMLElement
     static: true, // Required for static content. Default: false.
     items: 10, // Required for dynamic content. Initial number of items in the container.
     gutter: 0, // Optional. Space between items. Default: 25(px).
     maxColumns: 3, // Optional. Maximum number of columns. Default: Infinite.
     animate: true, // Optional. Animate item positioning. Default: false.
   });
   magicGrid.listen();
<script>

问题是，此库为ID为transform的容器中的所有子项设置了样式position和grid。结果将是这样的（此示例中为px）：

<div id="grid" class="container" style="position: realitve; height: 980px">
   <div class="row" style="transform: 0px, 0px;"> <!- here have to be no style attr
       <div class="item1" style="transform: 135px, 0px; position: realitve; ..."></div>
       <div class="item2" style="transform: 233px, 110px; position: realitve; ..."></div>
       <div class="item3" style="transform: 459px, 230px; position: realitve; ..."></div>
       <div class="item4" style="transform: 670px, 397px; position: realitve; ..."></div>
   </div>
</div>

通过每次调整窗口大小，将重新计算项目的位置，以使对所有不同设备和窗口大小的响应性相对应。

问题来了。如果没有row，除了电话以外，其他所有事物的舞蹈都很完美。布局向右移一点，唯一有用的是带有行类的div。

但是，如果调整窗口大小，此row div也将得到transform，并且布局制动到处都是。这些项目位于页脚和键盘之间的某个位置。有什么办法可以使该行div，但是保护/防止lib自定义其style属性？

我尝试在调整窗口大小的情况下运行脚本，以检查行是否具有attr style并将其删除（如果为true的话），但是很遗憾，这根本没有帮助。

还是唯一的选择是根据我的需要重构lib中的代码？ Magic Grid index file。甚至不确定是否可以。

更新！解决。

所以问题出在构造函数中。我没有初始化配置useTransform。我初始化useTransfrom：false后，在没有row div的所有设备上，布局开始响应。有点怪异的感觉，因为我不太了解useTransform:false;无行和useTransfrom: true;有行之间的联系。

JS / jQuery库为所有子级添加了样式，这是不可接受的

0 个答案: