Вывод элементов массива через for (js) в grid снизу вверх справа налево, как так сделать?
Добрый день! Я только учусь всему и делаю для себя Пэт проект и появился вопрос. Смотрите, есть цикл for, который выводит картинки из массива в сетку grid, и делает он это начиная с левой верхней клетки и движется вправо и вниз, а мне нужно, чтобы вывод начинался с правой нижней ячейки и шел вверх, получается — справа на лево и снизу вверх одновременно поэлементно, т.е. каждый последующий элемент массива выводился левее предыдущего и когда упирался в левую границу grid, то следующий элемент появился выше на ряд, получается в ячейке над ячейкой с которой начался вывод и так дальше. Не могу сам придумать как так сделать и решение в интернете никак не найду, а тут вроде люди разбирающиеся, вдруг помогут:))
Подскажите, пожалуйста, как такое реализовать или ткните носом, где можно об этом почитать. Спасибо!
Дополнительно:
Показывайте код.
У гридов нет свойств для изменения направления. Есть у флексов, но только по одной оси.
Поэтому проще будет вывести разметку в обратном порядке.
Примерно так:
snippet
- Спасибо, большое!
По логике все верно, буду пытаться внедрить в свою структуру.
Там надо количество ячеек отслеживать по количеству элементов массива.
Короче, :))) я делаю визуально типа эмулятор экрана мобильного телефона и хотел выводить приложения скаченные в телефон посредством массива кнопок с изображением, соответствующим, каждому приложению и потом в массив добавлять элемент, будто скачал приложение и чтоб кнопка запуска появлялась на экране телефона. И у телефонов (настоящих) нижний ряд кнопок приложений там: контакты, смс, браузер, камера. А выше уже приложения скаченные. конечно, можно было бы отделить эти нижние кнопки и выставить их хардкодом, а уже верхние реализовать массивом и даже со стандартным порядком вывода, но почему-то я решил все приложения под один массив обернуть, и при таком подходе нужно, чтоб четыре первых элемента шли по низу экрана телефона, по гриду получается как раз разметка в обратном порядке. как-то так :)) - Евгений,
можно было бы отделить эти нижние кнопки и выставить их хардкодом
и это была правильная мысль
- Евгений, если очень захтеть - можно сделать transform: rotate(180deg) всего грида, а потом transform: rotate(180deg) каждой ячейки, чтоб обратно встало. Ну и transform-origin: 50% 50%. :)
- Сергей delphinpro, ммм-да? Вы, считаете? нуу, ладно, скорее всего Вы правы и я зря заморачиваюсь. Хорошо, сделаю, как вы посоветовали, но Ваш изначальный ответ пусть останется. в интернете нигде не нашел такого, вдруг кому-то пригодится!!
еще раз Спасибо!! - Aetae, месье знает толк в извращениях =)) Жму руку!
- Aetae, Я ваши Гриды вертел, как говорится :))) Но как идея - очень круто!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для вывода элементов массива через цикл for в grid снизу вверх справа налево в JavaScript можно воспользоваться следующим кодом:
let grid = document.getElementById('grid'); // Получаем элемент grid из HTML let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // Пример массива for (let i = arr.length - 1; i >= 0; i--) { // Начинаем с последнего элемента массива и идем к началу let cell = document.createElement('div'); // Создаем элемент div для каждого элемента массива cell.textContent = arr[i]; // Заполняем ячейку текстом из массива grid.appendChild(cell); // Добавляем ячейку в grid }
В данном коде мы сначала получаем элемент grid из HTML, затем создаем массив arr с элементами. Далее, мы используем цикл for, начиная с последнего элемента массива и идя к началу. Внутри цикла создаем div элемент для каждого элемента массива, заполняем его текстом из массива и добавляем в grid. Таким образом, элементы массива будут выводиться в grid снизу вверх справа налево.
Если у вас есть какие-либо дополнительные вопросы или нужна дополнительная помощь, пожалуйста, не стесняйтесь обращаться!