Какой формулой можно вычислить смещение карточек от левого края до правого?

Question

[godsplane]

Может есть решение проще конечно, но я придумал посчитать ширину контейнера и смещать каждую карточку на какую то часть от этой ширины контейнера чтобы в конечном итоге любое кол-во карточек вместилось и наложилось друг на друга.
Ширину карточкам я хочу задать через container-width / card.length


Но я не особо понял что на что делить чтобы получить желаемый результат.

Answer 1

[hint000]

у меня уже есть решение от ответа который удалили почему то, оно работает, но я хочу понять именно алгоритм

доступная_ширина_для_размещения_карточек = ширина_окна - ширина_левого_поля - ширина_правого_поля

суммарная_ширина_карточек = ширина_карточки * количество_карточек

недостаток_ширины = суммарная_ширина_карточек - доступная_ширина_для_размещения_карточек

суммарная_ширина_наложений = недостаток_ширины

количество наложений = количество_карточек -1

ширина_наложения = суммарная_ширина_наложений / количество наложений

начало_первой_карточки = начало_окна + ширина_левого_поля

начало_карточки = начало_предыдущей_карточки + ширина_карточки - ширина_наложения

Answer 2

[mayton2019]

Линейная зависимость. Бери некий box, который ограничиает карточки. Его размеры - это экран минус margins.
И внутри этого бокса надо разложить карточки с одинаковым шагом. Беря во внимание что карточка тоже имеет
размер - вычитаем ширину карточки из ширины бокса. Также с высотой. Оставшееся - делим на 4 и получаем шаг.

Comments

[Akina]

Только не на 4, а на 3. Между 4 карточками - 3 зазора.

[godsplane]

Спасибо за ответ. Проблема как раз таки в том какой шаг надо брать если карточки наклыдываются друг на друга? То есть получается нужно какой то offset добавлять, но как его добавить в формулу я не особо понял.
Я пока накидал что-то такое. но это естественно не работает.

const heroContent = document.querySelector(".hero-content-inner");
  const heroItem = document.querySelectorAll(".hero-content__item");
  heroItem.forEach((elem, index) => {
    elem.style.width = `${heroContent.getBoundingClientRect().width / heroItem.length}px`;
    elem.style.left = `${
      (heroContent.getBoundingClientRect().width / 100) * ((100 / heroItem.length) * index) - elem.getBoundingClientRect().width / heroItem.length / 2
    }px`;
  });

[mayton2019]

Akina, да верно. Вобщем формула простая. Автор доволен. И ваш покорный слуга получает плюсик к ответам.

[Akina]

godsplane,

То есть получается нужно какой то offset добавлять, но как его добавить в формулу я не особо понял.

Да что тут не понять? Берёшь ширину всего окна. Отнимаешь свободные границы, те, что слева-справа от карточек. Отнимаешь ширину одной карточки. Остаток делишь на количество карточек минус один - получаешь шаг смещения. Всё.

[mayton2019]

const heroContent = document.querySelector(".hero-content-inner");
..

Что это за чертовщина такая? Нет я конечно могу такую формулу создать. Но.. Зачем мне эти детали из мира веб-дизайна? Я не понимаю.

Можем ли мы просто разговаривать в терминах JavaScript функции которая принимает
на вход все параметры и на выхот отдает xstep=, ystep= ?

[godsplane]

Akina,
Получается такой результат с такой формулой:

document.addEventListener("DOMContentLoaded", () => {
  const heroContent = document.querySelector(".hero-content-inner");
  const heroItem = document.querySelectorAll(".hero-content__item");
  const offset = 100;
  heroItem.forEach((elem, index) => {
    elem.style.width = `${heroContent.getBoundingClientRect().width / heroItem.length}px`;
    const form = (heroContent.getBoundingClientRect().width - heroItem[0].getBoundingClientRect().width) / heroItem.length - 1;
    elem.style.transform = `translateX(${form * index}px)`;
  });
});

Это учитывая то что я еще умножил на индекс.

[godsplane]

mayton2019, да , это больше для того чтобы я понимал о чем говорю и может быть вам нагляднее было.

[mayton2019]

godsplane, я пас. Моя слабая психика не выдерживает этот ваш веб-дизайн.

Вон тебе уже решение дали.

[godsplane]

mayton2019, нееет, мне интересны алгоритмы, обещаю больше не скидывать js.
Решение не работает вроде как.

[godsplane]

mayton2019, у меня уже есть решение от ответа который удалили почему то, оно работает, но я хочу понять именно алгоритм.

[Akina]

godsplane,

Получается такой результат с такой формулой:

А что ж ты с нуля-то начал?

[godsplane]

Akina, о чем конкретно речь?