Я использую эту библиотеку 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>
Дело в том, что эта библиотека устанавливает стили 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
иудалите его, если это правда, но, к сожалению, это совсем не помогло.
Или единственный вариант - это изменить код в lib в соответствии с моими потребностями? Индексный файл Magic Grid .Даже не уверен, что это возможно.
ОБНОВЛЕНИЕ!Решено.
Итак, проблема была в конструкторе.Я не инициализировал конфигурацию useTransform
.Как только я инициализировал useTransfrom
: false
, компоновка стала реагировать на всех устройствах БЕЗ row
div.Странное чувство, потому что я не совсем понимаю связь между useTransform:false;
без строки и useTransfrom: true;
со строкой.