Мобильная версияЯ создал макет галереи каменной сетки с помощью Isotope и Vanilla JS. Кажется, все работает нормально, но при изменении размера на каменном элементе появляется какое-то правое поле, которое становится больше по мере уменьшения размера области просмотра.
Все было бы хорошо, но в инструментах разработчика Chrome нет никаких следов каких-либо полей, отступов или чего-то еще.
Я сделал синий фон каменной кладки, чтобы этот край был четко виден...
Вот ссылка на JSfiddle
CSS:
:root { семейство шрифтов: «Интер», без засечек; высота строки: 1,5; вес шрифта: 400; шрифт-синтез: нет; рендеринг текста:оптимизацияLegibility; -webkit-font-smoothing: сглаживание; -moz-osx-font-smoothing: оттенки серого; -webkit-text-size-adjust: 100%; размер коробки: граница-коробка; поведение прокрутки: плавное; } тело { цвет фона: белый; ширина полосы прокрутки: нет; ширина: 100%; маржа: 0; заполнение: 0; размер коробки: граница-коробка; } body::-webkit-полоса прокрутки { дисплей: нет; } .masonry-grid { маржа: 0 авто; ширина: 100%; максимальная ширина: 1440 пикселей; цвет фона: королевский синий; } .кладка-сетка, .masonry-grid * { размер коробки: граница-коробка; } .скрытый { отображение: нет !важно; } .элемент { положение: относительное; ширина: расчет (100 % – 10 пикселей); нижнее поле: 10 пикселей; /* переполнение: скрыто; */ /* переполнение: скрыто; Гарантирует, что псевдоэлемент остается в пределах .item */ радиус границы: 20 пикселей; /* соответствие объекта: обложка; */ /* поле: 10 пикселей 10 пикселей 0 10 пикселей; */ } .item изображение { /* максимальная ширина: 100%; */ ширина: 100%; дисплей: блок; радиус границы: 20 пикселей; переход: все 0,3 с; /* Добавлен переход для эффекта размытия */ /* соответствие объекта: обложка; */ } .item-информация { дисплей: нет; } /* Адаптивные точки останова */ @media (минимальная ширина: 600 пикселей) { .элемент { ширина: расчет (50% — 10 пикселей); } } @media (минимальная ширина: 960 пикселей) { .элемент { ширина: расчет (33,33% — 10 пикселей); } } @media (минимальная ширина: 1280 пикселей) { .элемент { ширина: расчет (25% — 10 пикселей); } } @media (минимальная ширина: 1600 пикселей) { .элемент { ширина: расчет (20% — 10 пикселей); } } JS:
let iso window.onload = функция () { const Grid = document.querySelector(".masonry-grid") const filterButtons = document.querySelectorAll(".кнопка фильтра-кнопки") // Инициализируем изотоп после того, как убедимся, что изображения загружены imagesLoaded (сетка, функция () { iso = новый изотоп (сетка, { itemSelector: ".item", LayoutMode: "кладка", стиль контейнера: нуль, каменная кладка: { columnsWidth: ".item", желоб: 12, itemSelector: ".item", }, }) }) // Изменение макета при изменении размера окна window.addEventListener("resize", () => { iso.layout() // Grid.style.objectFit = "обложка" }) } Пожалуйста, помогите, я медленно схожу с ума
Спасибо
Дж.Р.
Прежде всего я удалил весь остальной код из HTML, CSS и JS, надеясь, что какой-то другой элемент может стать проблемой. Я попробовал несколько решений в CSS и JS:
[*]размер коробки, соответствие объекту [*]Пытался повторно инициализировать Isotope при изменении размера области просмотра окна, чтобы «перерисовать» сетку кладки при изменении области просмотра. [*]пробовал проверить с помощью инструментов разработчика Chrome и Firefox [*]Несколько других решений, предложенных поиском Google, ChatGPT, Bard....
Ничего не помогло
