#javascript #reactjs #npm #frontend
#javascript #reactjs #npm #интерфейс
Вопрос:
У меня проблема с позиционированием изображений в React. Я хочу простой пользовательский интерфейс, подобный этому
В этих карточках, когда в пользовательский интерфейс попадают 2 изображения, пользовательский интерфейс должен быть похож на первый. Когда в пользовательский интерфейс попадают 4 изображения, пользовательский интерфейс должен быть таким. Я хочу сделать этот компонент динамическим. Я хочу передать изображения компоненту и хочу, чтобы изображения располагались в соответствии с количеством изображений. Есть ли какой-либо модуль npm, который работает подобным образом? Или как я могу написать подобный компонент?
Спасибо
Комментарии:
1. С точки зрения эстетики случайное размещение было бы некрасиво, представьте, что у вас есть два изображения, но они оба расположены полностью справа — пользовательский интерфейс выглядит сломанным. Возможно, вы можете использовать css grid?
2. Это проект заказчика, и заказчик хочет вот так
3. Вы можете рассчитать положение изображений на основе сетки (где это должно быть в обычном стиле), но добавьте к этому небольшой случайный фактор. Я думаю, это должно решить проблему.
4. Для этого вы можете изучить позиционирование сетки. У вас может быть набор классов, которые вы применяете к своим изображениям, которые отображаются в виде элементов списка, и набор классов применяется случайным образом к
li
изображениям.