相关疑难解决方法(0)

它让我觉得我document.querySelectorAll(...).map(...)甚至不能在Firefox 3.6中做到这一点,我仍然无法找到答案,所以我想我会在这篇博客上交叉发帖:

http://blowery.org/2008/08/29/yay-for-queryselectorall-boo-for-staticnodelist/

有没有人知道你没有获得阵列的技术原因？或者为什么StaticNodeList不从数组继承以这样的方式,你可以使用map,concat等等？

(顺便说一句,如果它只是你想要的一个功能,你可以做类似NodeList.prototype.map = Array.prototype.map;......但是,为什么这个功能(故意？)首先被阻止？)

有没有办法使用flex或其他技术在CSS中定义内容流,这样内容"zig zags"或以这种方式四处走动:

 -----------------
|A > B > C > D > E|
|J < I < H < G < F|
 -----------------

 ---
|A H|
|B G|
|C F|
|D E|
 ---

假设总有2列或行.我可以将项目拆分为2并在它们周围创建2个包装项目,但我希望它更具动态性.

基本上,如何让第一行向右流动,第二行向左流动？

我想找到一种方法，将单个容器中的元素包装到与前一行相反方向的新行，就像一条蛇向后弯曲。我无法使用 flexbox 以及 flex-direction 和 flex-wrap 属性的任何组合来实现这一结果。

flexbox 结果与期望结果的图像比较：

这是一个显示 flexbox 结果与所需结果（伪造）的片段：

body {
  font: 400 14px 'Arial', sans-serif;
}

.title {
  font-size: 1em;
  padding: 20px 0;
}

.title:first-child {
  padding: 0 0 20px;
}

.flex-container, .fake-container, .fake-row {
  width: 500px;
  background: orange;
  display: flex;
}

.flex-container {
  flex-flow: row wrap; /* any combination of row/reverse & wrap/reverse */
}

.item {
  display: inline-block;
  background: purple;
  width: 80px;
  max-width: 80px;
  height: 80px;
  margin: 10px;
  line-height: 80px;
  color: white;
  font-weight: bold; …

像这样的 flexbox：

display: flex;
flex-flow: row wrap;

和网格是这样的：

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

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

我不确定这是一两个问题，因为 flexbox 和 grid 可能有不同的解决方案。现在我无论如何都会问。

如何获得行数和列数？并通过行索引和列索引进一步获取项目？

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

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

当使用CSS 网格布局动态排列行中的元素时，浏览器会根据视口的大小计算一行中的项目数。我正在寻找一种使用 JavaScript 来确定给定视口大小的每行中有多少项目的方法。我的目的是填补最后不可避免的空行部分。

例如，给定下面列出的 CSS 和 HTML，并且在特定的视口大小下会产生以下布局：

在更宽的视口中会产生以下布局：

每个都在最后一行缺少元素。

拥有最大数量的一行元素，我可以动态加载更多元素来填充最后一行，因此它与其余元素的数量相同。

CSS 和 HTML 示例：

<style>

* {
  box-sizing: border-box;
}
body {
  padding: 1rem;
}

main {
  max-width: 500px;
  margin: 0 auto;
}
article {
  margin: 1rem 0;
  overflow: hidden;
}

main {
  max-width: 10000px;
  margin: 0;
}
article {
  margin: 0;
}
.listings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}

.listings {
  font-family: Avenir, Roboto, Helvetica, san-serif;
  font-size: 80%;
}
.listing {
  display: …