如何获取 javascript 中用于 flexbox 和网格布局的行数和列数？

Posted 2023-03-05

【中文标题】如何获取 javascript 中用于 flexbox 和网格布局的行数和列数？

【英文标题】：How to get count of rows and columns in javascript for flexbox and grid layout?

【发布时间】：2018-09-05 11:30:12

【问题描述】：

这样的弹性盒：

display: flex;
flex-flow: row wrap;

和这样的网格：

display: grid;
grid-template-columns: repeat(auto-fill, 20px);

动态排列项目，行数和列数不固定。

我不确定这是一两个问题，因为弹性盒和网格可能有不同的解决方案。反正现在我会问。

如何获取行数和列数？并进一步逐行索引和列索引获取？

以https://jsfiddle.net/w2L8oumw/16/ 为例。拖动边框使结果窗口的宽度发生变化，从而使行数和列数也发生变化。

我的想法是迭代所有项目，并根据它们的位置、初始化、项目更改和调整大小来决定它们的行索引和列索引。

【问题讨论】：

这可能对你有帮助：***.com/questions/49043684/…

谢谢@TemaniAfif！我还看到***.com/a/49090306/1992731在同一个线程中解释得很好，提出了一个聪明的想法offsetTop来确定行数。

【参考方案1】：

下面为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.log(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，如果网格的子元素占据了它们的整个单元格宽度...否则，数字将太高，因为它认为当他们不是

【参考方案2】：

我们需要计算并找到，请找到下面的函数function setrIdcId(containerId)。现在我正在点击按钮。您可以在需要时致电。 （在滚动或调整大小）。 Fiddle已更新

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>

【参考方案3】：

问题有点老了，但如果有人需要这个：

如果您使用的是 CSS-Grid，则不需要进行太多计算。您可以获取当前模板设置，例如与

getComputedStyle(container).getPropertyValue("grid-template-rows")

在现代浏览器中，这会返回实际值，而不是 css 中的值，所以你会得到一个类似的字符串

250px 250px 250px

您可以通过拆分字符串并计算结果数组中的元素来计算当前行数。

这可能也适用于较旧的 IE，我没有测试它。

【讨论】：

好主意！这应该是公认的答案