https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
реализована с использованием CSS flexbox.Пример:
Количество строк в этом примере равно 4, потому что я установил ширину контейнера для демонстрационных целей. Но в действительности он может меняться в зависимости от ширины контейнера (например, если пользователь изменяет размеры окна). Попробуйте изменить размер окна вывода вэтот пример чтобы почувствовать.
Всегда есть один активный элемент, отмеченный черной рамкой.
Используя JavaScript, я позволяю пользователям переходить к предыдущему / следующему элементу, используя стрелку влево / вправо. В моей реализации я просто уменьшаю / увеличиваю индекс активного элемента на 1.
Теперь я бы хотел, чтобы пользователи также могли перемещаться вверх / вниз. Для этого мне просто нужно уменьшить / увеличить индекс активного элемента на<amount of items in a row>
, Но как рассчитать это число, если оно зависит от ширины контейнера? Есть ли лучший способ реализовать функциональность вверх / вниз?
.grid {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 250px;
height: 200px;
background-color: #ddd;
padding: 10px 0 0 10px;
}
.item {
width: 50px;
height: 50px;
background-color: red;
margin: 0 10px 10px 0;
}
.active.item {
outline: 5px solid black;
}
<div id="grid" class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>