Как получить количество строк и столбцов в javascript для макета flexbox и сетки?
flexbox вот так:
display: flex;
flex-flow: row wrap;
и вот такая сетка:
display: grid;
grid-template-columns: repeat(auto-fill, 20px);
динамически упорядочивать элементы, а количество строк и столбцов не фиксировано.
Я не уверен, что это одна или две проблемы, так как для flexbox и grid могут быть разные решения. А пока я все равно спрашиваю через некоторое время.
Как я могу узнать количество строк и столбцов? А дальше получать построчно по индексу и индексу столбца?
См. Например, https://jsfiddle.net/w2L8oumw/16/. Перетащите границу фрейма, чтобы изменить ширину окна результатов, так что количество строк и столбцов тоже изменится.
Моя идея состоит в том, чтобы перебрать все элементы и определить их индекс строки и индекс столбца в соответствии с их положением при инициализации, изменении элемента и изменении размера.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Один пример решения для расчета столбцов приведен ниже для flexbox, для row и grid вам необходимо выполнить аналогичный расчет для строки.
Возможно, вам потребуется добавить или удалить некоторые вычисления.
var getComputedValue = function (container, cssProp) {
return parseInt(window.getComputedStyle(container, null).getPropertyValue(cssProp).split('px')[0]);
};
var calcColms = function() {
var container = document.getElementById("flexbox");
var parentWidth = getComputedValue(container,"width");
var parentPaddingLeft = getComputedValue(container,"padding-left");
var parentPaddingRight = getComputedValue(container,"padding-Right");
var child = container.firstElementChild;
var childWidth = getComputedValue(child,"width");
var childMarginLeft = getComputedValue(child,"margin-left");
var childMarginRight = getComputedValue(child,"margin-right");
var parentWidthNoPadding = parentWidth - parentPaddingLeft - parentPaddingRight;
var childWidthWithMargin = childWidth + childMarginLeft + childMarginRight;
parentWidthNoPadding = parentWidthNoPadding + childMarginLeft + childMarginRight;
var noCols = parseInt(parentWidthNoPadding / childWidthWithMargin);
console.info(noCols);
}
window.onload = function () {
calcColms();
};
window.onresize = function () {
calcColms();
};#flexbox{
display:flex;
flex-flow: row wrap;
height:30vh;
width:30vw;
background:black;
padding:5px;
margin:5px;
}
#flexbox > div{
height:40px;
width:40px;
background:purple;
margin:5px;
}
#grid{
display:grid;
grid-template-columns: repeat(auto-fill, 40px);
grid-gap: 10px;
height:30vh;
width:30vw;
background:black;
padding:5px;
margin:5px;
}
#grid > div{
height:40px;
/*width:40px;*/
background:purple;
}<div id = "flexbox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id = "grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>Это будет работать только для grid, если дочерние элементы сетки занимают всю ширину своей ячейки ... в противном случае число будет слишком большим, потому что он думает, что в строке может поместиться больше, когда они не
Нам нужно вычислить и найти, пожалуйста, ниже функцию function setrIdcId(containerId). Теперь звоню по нажатию кнопки. Вы можете вызвать, когда захотите. (на прокрутке или изменении размера). Скрипка обновлено
var GetItemOfContainer = function (container, rIdx, cIdx) {
// solution code here
}
function setrIdcId(containerId){
_el = document.getElementById(containerId);
_boxes = _el.children;
var colCnt = Math.floor((_el.offsetWidth)/50); //Number of Column; 50:box width
var rowCnt = Math.ceil(_boxes.length/colCnt); //Number of Rows
for(var i = 0; i < _boxes.length; i++) {
var cIdx = Math.floor(i / colCnt); // X
var rIdx = Math.floor(i % colCnt); // Y
_boxes[i].innerHTML = cIdx +":"+ rIdx; // Print //
}
}#flexbox{
display:flex;
flex-flow: row wrap;
height:30vh;
width:30vw;
background:black;
padding:5px;
margin:5px;
}
#flexbox > div{
height:40px;
width:40px;
background:purple;
margin:5px;
}
#grid{
display:grid;
grid-template-columns: repeat(auto-fill, 40px);
grid-gap: 10px;
height:30vh;
width:30vw;
background:black;
padding:5px;
margin:5px;
}
#grid > div{
height:40px;
/*width:40px;*/
background:purple;
}<div id = "grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<button onClick = "setrIdcId('grid')" type = "button">Call
</button>Вопросы немного старше, но на случай, если кому-то это понадобится:
Если вы работаете с CSS-Grid, вам не нужно столько вычислений. Вы можете получить текущие настройки шаблона, например с участием
getComputedStyle(container).getPropertyValue("grid-template-rows")
в современных браузерах это возвращает фактические значения, а не значения из вашего CSS, поэтому вы получаете строку вроде
250px 250px 250px
Затем вы можете рассчитать текущее количество строк, разделив строку и подсчитав элементы в результирующем массиве.
Это может работать и в старых IE, я не тестировал.
Это может вам помочь: stackoverflow.com/questions/49043684/…