Как рассчитать количество элементов flexbox в строке?
Сетка реализована с использованием Flexbox. Пример:
![enter image description here]()
Количество строк в этом примере равно 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>
Ответы
Ответ 1
(Для оптимального опыта лучше всего использовать интерактивные фрагменты на полной странице)
Вычисление количества элементов в строке
Вам нужно получить ширину элемента с его границей (в конце концов, если они установлены), тогда вам нужно получить внутреннюю ширину контейнера без заполнения. Имея эти 2 значения, вы делаете простое разделение, чтобы получить число элементов в строке.
Не забудьте рассмотреть случай, когда у вас есть только одна строка, поэтому вам нужно получить минимальное значение между общим количеством элементов и числом, которое вы получаете от подразделения.
//total number of element
var n_t = document.querySelectorAll('.item').length;
//width of an element
var w = parseInt(document.querySelector('.item').offsetWidth);
//full width of element with margin
var m = document.querySelector('.item').currentStyle || window.getComputedStyle(document.querySelector('.item'));
w = w + parseInt(m.marginLeft) + parseInt(m.marginRight);
//width of container
var w_c = parseInt(document.querySelector('.grid').offsetWidth);
//padding of container
var c = document.querySelector('.grid').currentStyle || window.getComputedStyle(document.querySelector('.grid'));
var p_c = parseInt(c.paddingLeft) + parseInt(c.paddingRight);
//nb element per row
var nb = Math.min(parseInt((w_c - p_c) / w),n_t);
console.log(nb);
window.addEventListener('resize', function(event){
//only the width of container will change
w_c = parseInt(document.querySelector('.grid').offsetWidth);
nb = Math.min(parseInt((w_c - p_c) / w),n_t);
console.log(nb);
});
.grid {
display: flex;
flex-wrap: wrap;
resize:horizontal;
align-content: flex-start;
background-color: #ddd;
padding: 10px 0 0 10px;
}
.item {
width: 80px;
height: 80px;
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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Ответ 2
Вопрос немного более сложный, чем поиск количества элементов в строке.
В конечном счете, мы хотим знать, есть ли элемент выше, ниже, слева и справа от активного элемента. И это должно учитывать случаи, когда нижняя строка является неполной. Например, в приведенном ниже примере активный элемент не имеет элемента выше, ниже или справа:
![enter image description here]()
Но, чтобы определить, есть ли элемент выше/ниже/слева/справа от активного элемента, нам нужно знать, сколько элементов находится в строке.
Найдите количество элементов в строке
Чтобы получить количество элементов в строке, нам нужно:
-
itemWidth - outerWidth одного элемента, включая border, padding и margin -
gridWidth - innerWidth сетки, исключая border, padding и margin
Чтобы рассчитать эти два значения с помощью обычного JavaScript, мы можем использовать:
const itemStyle = singleItem.currentStyle || window.getComputedStyle(active);
const itemWidth = singleItem.offsetWidth + parseFloat(itemStyle.marginLeft) + parseFloat(itemStyle.marginRight);
const gridStyle = grid.currentStyle || window.getComputedStyle(grid);
const gridWidth = grid.clientWidth - (parseFloat(gridStyle.paddingLeft) + parseFloat(gridStyle.paddingRight));
Затем мы можем вычислить количество элементов в строке, используя:
const numPerRow = Math.floor(gridWidth / itemWidth)
Примечание: это будет работать только для элементов однородного размера, и только если margin определена в единицах px.
Многое, много, много упрощенного подхода
Работа со всеми этими ширинами, а также прокладки, поля и границы действительно запутывают. Там гораздо, гораздо более простое решение.
Нам нужно только найти индекс элемента сетки, значение offsetTop которого больше, чем первый элемент offsetTop.
const grid = Array.from(document.querySelector("#grid").children);
const baseOffset = grid[0].offsetTop;
const breakIndex = grid.findIndex(item => item.offsetTop > baseOffset);
const numPerRow = (breakIndex === -1 ? grid.length : breakIndex);
Терминал в конце учитывает случаи, когда в сетке есть только один элемент и/или один ряд элементов.
const getNumPerRow = (selector) => {
const grid = Array.from(document.querySelector(selector).children);
const baseOffset = grid[0].offsetTop;
const breakIndex = grid.findIndex(item => item.offsetTop > baseOffset);
return (breakIndex === -1 ? grid.length : breakIndex);
}
.grid {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 400px;
background-color: #ddd;
padding: 10px 0 0 10px;
margin-top: 5px;
resize: horizontal;
overflow: auto;
}
.item {
width: 50px;
height: 50px;
background-color: red;
margin: 0 10px 10px 0;
}
.active.item {
outline: 5px solid black;
}
<button onclick="alert(getNumPerRow('#grid'))">Get Num Per Row</button>
<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>
Ответ 3
Единственный способ передвижения вверх и вниз, который возникает из-за менее нежелательного усложнения моих знаний, - это количество ящиков в строке и изменение индексов. Единственная проблема заключается в том, что вам нужно вычислить бокс-сечение как при загрузке окна, так и при изменении размера.
var boxPerRow=0;
function calculateBoxPerRow(){}
window.onload = calculateBoxPerRow;
window.onresize = calculateBoxPerRow;
Теперь, если вы хотите очень простой способ получить количество ящиков в строке, даже не заботясь о размере ни контейнера, ни полей, забудьте поля и прокладки, вы можете проверить, сколько ячеек выровнено с первым полем, сравнивающим offsetTop.
Свойство HTMLElement.offsetTop для чтения возвращает расстояние от текущего элемента относительно вершины узла offsetParent. [источник: developer.mozilla.orgl ]
Вы можете реализовать его, как показано ниже:
function calculateBoxPerRow(){
var boxes = document.querySelectorAll('.item');
if (boxes.length > 1) {
var i = 0, total = boxes.length, firstOffset = boxes[0].offsetTop;
while (++i < total && boxes[i].offsetTop == firstOffset);
boxPerRow = i;
}
}
Полный рабочий пример:
(function() {
var boxes = document.querySelectorAll('.item');
var boxPerRow = 0, currentBoxIndex = 0;
function calculateBoxPerRow() {
if (boxes.length > 1) {
var i = 0,
total = boxes.length,
firstOffset = boxes[0].offsetTop;
while (++i < total && boxes[i].offsetTop == firstOffset);
boxPerRow = i;
}
}
window.onload = calculateBoxPerRow;
window.onresize = calculateBoxPerRow;
function focusBox(index) {
if (index >= 0 && index < boxes.length) {
if (currentBoxIndex > -1) boxes[currentBoxIndex].classList.remove('active');
boxes[index].classList.add('active');
currentBoxIndex = index;
}
}
document.body.addEventListener("keyup", function(event) {
switch (event.keyCode) {
case 37:
focusBox(currentBoxIndex - 1);
break;
case 39:
focusBox(currentBoxIndex + 1);
break;
case 38:
focusBox(currentBoxIndex - boxPerRow);
break;
case 40:
focusBox(currentBoxIndex + boxPerRow);
break;
}
});
})();
.grid {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 50%;
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>[You need to click on this page so that it can recieve the arrow keys]</div>
<div id="grid" class="grid">
<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Ответ 4
Чтобы поддерживать перемещение вверх, вниз, влево и вправо, вам не нужно знать, сколько ящиков есть в строке, вам просто нужно вычислить, есть ли над ним, внизу, слева или справа от активной коробки,
Перемещение влево и вправо прост, как вы заметили, - просто проверьте, имеет ли активная ячейка previousSiblingElement nextSiblingElement или следующий nextSiblingElement. Для вверх и вниз, вы можете использовать текущую активную форму в качестве опорной точки и сравнить его с другой коробкой getBoundingClientRect() s, метод DOM, который возвращает geomoetry элемента относительно к браузерам просмотра.
При попытке подняться вверх, начните с якоря и пересчитайте предметы по направлению к 0. При движении вниз, начните с якоря и подсчитывайте до конца количества предметов. Это связано с тем, что при перемещении мы занимаемся только коробками перед активным ящиком, а при спуске мы заботимся о коробках после него. Все, что нам нужно искать, это коробка, которая имеет ту же левую позицию с более высокой или нижней верхней позицией.
Ниже приведен пример, который прослушивает событие keydown в window и будет перемещать активное состояние в соответствии с нажатой клавишей со стрелкой. Это определенно можно сделать более сухим, но я разделил четыре случая, чтобы вы могли видеть точную логику в каждом. Вы можете удерживать клавиши со стрелками вниз, чтобы поле двигалось непрерывно, и вы можете видеть его очень эффектным. И я обновил ваш JSBin своим решением здесь: http://jsbin.com/senigudoqu/1/edit?html,css,js,output
const items = document.querySelectorAll('.item');
let activeItem = document.querySelector('.item.active');
function updateActiveItem(event) {
let index;
let rect1;
let rect2;
switch (event.key) {
case 'ArrowDown':
index = Array.prototype.indexOf.call(items, activeItem);
rect1 = activeItem.getBoundingClientRect();
for (let i = index; i < items.length; i++) {
rect2 = items[i].getBoundingClientRect();
if (rect1.x === rect2.x && rect1.y < rect2.y) {
items[i].classList.add('active');
activeItem.classList.remove('active');
activeItem = items[i];
return;
}
}
break;
case 'ArrowUp':
index = Array.prototype.indexOf.call(items, activeItem);
rect1 = activeItem.getBoundingClientRect();
for (let i = index; i >= 0; i--) {
rect2 = items[i].getBoundingClientRect();
if (rect1.x === rect2.x && rect1.y > rect2.y) {
items[i].classList.add('active');
activeItem.classList.remove('active');
activeItem = items[i];
return;
}
}
break;
case 'ArrowLeft':
let prev = activeItem.previousElementSibling;
if (prev) {
prev.classList.add('active');
activeItem.classList.remove('active');
activeItem = prev;
}
break;
case 'ArrowRight':
let next = activeItem.nextElementSibling;
if (next) {
next.classList.add('active');
activeItem.classList.remove('active');
activeItem = next;
}
break;
default:
return;
}
}
window.addEventListener('keydown', updateActiveItem);
.grid {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Ответ 5
Хотя вы можете рассчитать, какой элемент вы ищете, я предлагаю вам найти элемент ниже. Преимущество этого заключается в том, что он даже будет работать, если ваши элементы не имеют одинаковой ширины.
Поэтому давайте подумаем об атрибутах элемента ниже. По сути, это первый элемент с более высоким offsetTop и тем же offsetLeft. Вы можете сделать что-то подобное, чтобы найти элемент ontop:
const active = document.querySelector('.item.active');
const all = [...document.querySelectorAll('.item')]
const below = all
.filter(c => c.offsetTop > active.offsetTop)
.find(c => c.offsetLeft >= active.offsetLeft)
const ontop = [...all].reverse()
.filter(c => c.offsetTop < active.offsetTop)
.find(c => c.offsetLeft >= active.offsetLeft)
Ответ 6
В этом примере предполагается, что конечные точки движения ограничены. Кроме того, при переходе от второй к последней строке до последней строки, но в последней строке меньше столбцов, она будет перемещаться в последний столбец последней строки.
Это решение отслеживает строки/столбцы и использует объект сетки, чтобы отслеживать, где находятся элементы. Позиции будут обновляться в объекте сетки при изменении размера страницы.
(вы можете увидеть обновление упаковки в действии в полноэкранном режиме)
var items = document.querySelectorAll(".item");
var grid = {}; // keys: row, values: index of div in items variable
var row, col, numRows;
// called only onload and onresize
function populateGrid() {
grid = {};
var prevTop = -99;
var row = -1;
for(idx in items) {
if(isNaN(idx)) continue;
if(items[idx].offsetTop !== prevTop) {
prevTop = items[idx].offsetTop;
row++;
grid[row] = [];
}
grid[row].push(idx);
}
setActiveRowAndCol();
numRows = Object.keys(grid).length
}
// changes active state from one element to another
function updateActiveState(oldElem, newElem) {
oldElem.classList.remove('active');
newElem.classList.add('active');
}
// only called from populateGrid to get new row/col of active element (in case of wrap)
function setActiveRowAndCol() {
var activeIdx = -1;
for(var idx in items) {
if(items[idx].className == "item active")
activeIdx = idx;
}
for(var key in grid) {
var gridIdx = grid[key].indexOf(activeIdx);
if(gridIdx > -1) {
row = key;
col = gridIdx;
}
}
}
function moveUp() {
if(0 < row) {
var oldElem = items[grid[row][col]];
row--;
var newElem = items[grid[row][col]];
updateActiveState(oldElem, newElem);
}
}
function moveDown() {
if(row < numRows - 1) {
var oldElem = items[grid[row][col]];
row++;
var rowLength = grid[row].length
var newElem;
if(rowLength-1 < col) {
newElem = items[grid[row][rowLength-1]]
col = rowLength-1;
} else {
newElem = items[grid[row][col]];
}
updateActiveState(oldElem, newElem);
}
}
function moveLeft() {
if(0 < col) {
var oldElem = items[grid[row][col]];
col--;
var newElem = items[grid[row][col]];
updateActiveState(oldElem, newElem);
}
}
function moveRight() {
if(col < grid[row].length - 1) {
var oldElem = items[grid[row][col]];
col++;
var newElem = items[grid[row][col]];
updateActiveState(oldElem, newElem);
}
}
document.onload = populateGrid();
window.addEventListener("resize", populateGrid);
document.addEventListener('keydown', function(e) {
e = e || window.event;
if (e.keyCode == '38') {
moveUp();
} else if (e.keyCode == '40') {
moveDown();
} else if (e.keyCode == '37') {
moveLeft();
} else if (e.keyCode == '39') {
moveRight();
}
});
.grid {
display: flex;
flex-wrap: wrap;
resize: horizontal;
align-content: flex-start;
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 active"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Ответ 7
Я знаю, что это не совсем то, о чем просит ОП, но я хотел показать возможную альтернативу (зависит от варианта использования).
Вместо использования CSS flexbox существует также более новая CSS-сетка, которая фактически содержит столбцы и строки. Таким образом, преобразуя структуру в сетку и используя некоторый JS для прослушивания нажатых клавиш, активный элемент может быть перемещен (см. Неполный рабочий пример ниже).
var x = 1, y = 1;
document.addEventListener('keydown', function(event) {
const key = event.key;
// "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
console.log(key);
if (key == "ArrowRight") {
x++;
}
if (key == "ArrowLeft") {
x--;
if (x < 1) {
x = 1;
}
}
if (key == "ArrowUp") {
y--;
if (y < 1) {
y = 1;
}
}
if (key == "ArrowDown") {
y++;
}
document.querySelector('.active').style.gridColumnStart = x;
document.querySelector('.active').style.gridRowStart = y;
});
.grid {
display: grid;
grid-template-columns: repeat(auto-fill,50px);
grid-template-rows: auto;
grid-gap: 10px;
width: 250px;
height: 200px;
background-color: #ddd;
padding: 10px;
}
.item {
width: 50px;
height: 50px;
background-color: red;
margin: 0 10px 10px 0;
display: flex;
justify-content: center;
align-items: center;
}
.active {
outline: 5px solid black;
grid-column-start: 1;
grid-column-end: span 1;
grid-row-start: 1;
grid-row-end: span 1;
}
<div id="grid" class="grid">
<div class="item active">A1</div>
<div class="item">A2</div>
<div class="item">A3</div>
<div class="item">A4</div>
<div class="item">B1</div>
<div class="item">B2</div>
<div class="item">B3</div>
<div class="item">B4</div>
<div class="item">C1</div>
<div class="item">C2</div>
</div>
Ответ 8
Вы можете использовать Array.prototype.filter(), чтобы сделать это довольно аккуратно. Чтобы получить количество элементов в строке, используйте эту функцию. Перейдите в селектор CSS, который вы хотите использовать (в этом случае.item). Когда у вас есть размер строки, стрелка навигация проста.
function getRowSize( cssSelector ) {
var firstTop = document.querySelector( cssSelector ).offsetTop;
// Sets rowArray to be an array of the nodes (divs) in the 1st row.
var rowArray = Array.prototype.filter.call(document.querySelectorAll( cssSelector ), function(element){
if( element.offsetTop == firstTop ) return element;
});
// Return the amount of items in a row.
return rowArray.length;
}
Примеры
Демо-версия CodePen: https://codepen.io/gtlitc/pen/EExXQE
Интерактивная демонстрация, отображающая размер строки и количество перемещений. http://www.smallblue.net/demo/49043684/
объяснение
Во-первых, функция устанавливает переменную firstTop как offsetTop самого первого узла.
Затем функция создает массив rowArray узлов в первой строке (если возможна перемещение вверх и вниз, первая строка всегда будет полной длиной строки).
Это делается путем вызова (заимствования) функции фильтра из прототипа Array. Мы не можем просто вызвать функцию фильтра в списке узлов, который возвращается QSA (селектор запросов), поскольку браузеры возвращают списки узлов вместо массивов, а списки узлов не являются подходящими массивами.
Затем оператор if просто фильтрует все узлы и возвращает только те, которые имеют тот же самый offsetTop что и первый узел. т.е. всех узлов в первой строке.
Теперь у нас есть массив, из которого мы можем определить длину строки.
Я пропустил реализацию обхода DOM, поскольку это просто, используя либо чистый Javascript, либо JQuery и т.д., И не был частью вопроса OP. Я хотел бы только отметить, что важно проверить, должен ли элемент, который вы собираетесь переместить, существовать до его перемещения.
Эта функция будет работать с любым способом компоновки. Flexbox, float, CSS grid, независимо от будущего.
Рекомендации
Почему document.querySelectorAll возвращает StaticNodeList, а не реальный массив?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Ответ 9
offsetTop - популярный метод определения y-позиции элемента.
Если два смежных элемента sibling имеют одинаковое положение y, мы можем с уверенностью предположить, что они визуально находятся в одной строке (так как все элементы имеют одинаковую высоту).
Таким образом, мы можем начать подсчет количества элементов в строке, сравнивая их y-позиции один за другим. Мы перестаем считать, как только у нас заканчиваются элементы, или мы сталкиваемся с соседним братом с другой y-позицией.
function getCountOfItemsInRow() {
let grid = document.getElementById('grid').children; //assumes #grid exists in dom
let n = 0; // Zero items when grid is empty
// If the grid has items, we assume the 0th element is in the first row, and begin counting at 1
if (grid.length > 0) {
n = 1;
// While the nth item has the same height as the previous item, count it as an item in the row.
while (grid[n] && grid[n].offsetTop === grid[n - 1].offsetTop) {
n++;
}
}
return n;
}
Ответ 10
В этом примере предполагается, что конечные точки движения ограничены. Кроме того, при переходе от второй к последней строке до последней строки, но в последней строке меньше столбцов, она будет перемещаться в последний столбец последней строки.
Это решение отслеживает строки/столбцы и использует объект сетки, чтобы отслеживать, где находятся элементы.
var items = document.querySelectorAll(".item");
var grid = {}; // keys: row, values: index of div in items variable
var row, col, numRows;
// called only onload and onresize
function populateGrid() {
grid = {};
var prevTop = -99;
var row = -1;
for(idx in items) {
if(isNaN(idx)) continue;
if(items[idx].offsetTop !== prevTop) {
prevTop = items[idx].offsetTop;
row++;
grid[row] = [];
}
grid[row].push(idx);
}
setActiveRowAndCol();
numRows = Object.keys(grid).length
}
// changes active state from one element to another
function updateActiveState(oldElem, newElem) {
oldElem.classList.remove('active');
newElem.classList.add('active');
}
// only called from populateGrid to get new row/col of active element (in case of wrap)
function setActiveRowAndCol() {
var activeIdx = -1;
for(var idx in items) {
if(items[idx].className == "item active")
activeIdx = idx;
}
for(var key in grid) {
var gridIdx = grid[key].indexOf(activeIdx);
if(gridIdx > -1) {
row = key;
col = gridIdx;
}
}
}
function moveUp() {
if(0 < row) {
var oldElem = items[grid[row][col]];
row--;
var newElem = items[grid[row][col]];
updateActiveState(oldElem, newElem);
}
}
function moveDown() {
if(row < numRows - 1) {
var oldElem = items[grid[row][col]];
row++;
var rowLength = grid[row].length
var newElem;
if(rowLength-1 < col) {
newElem = items[grid[row][rowLength-1]]
col = rowLength-1;
} else {
newElem = items[grid[row][col]];
}
updateActiveState(oldElem, newElem);
}
}
function moveLeft() {
if(0 < col) {
var oldElem = items[grid[row][col]];
col--;
var newElem = items[grid[row][col]];
updateActiveState(oldElem, newElem);
}
}
function moveRight() {
if(col < grid[row].length - 1) {
var oldElem = items[grid[row][col]];
col++;
var newElem = items[grid[row][col]];
updateActiveState(oldElem, newElem);
}
}
document.onload = populateGrid();
window.addEventListener("resize", populateGrid);
document.addEventListener('keydown', function(e) {
e = e || window.event;
if (e.keyCode == '38') {
moveUp();
} else if (e.keyCode == '40') {
moveDown();
} else if (e.keyCode == '37') {
moveLeft();
} else if (e.keyCode == '39') {
moveRight();
}
});
.grid {
display: flex;
flex-wrap: wrap;
resize: horizontal;
align-content: flex-start;
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 active"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Ответ 11
Если вы используете JQuery и уверены, что ваши объекты сетки выровнены по вертикали, это может сделать трюк.
Я не тестировал его, но он должен работать (путем подсчета столбцов)
function countColumns(){
var objects = $(".grid-object"); // choose a unique class name here
var columns = []
for(var i=0;i<objects.length;i++){
var pos = $(objects[i]).position().left
if(columns.indexOf(pos) < 1) columns.push(pos);
}
return columns.length
}
