javascript - 根据基于数学的算法更改 Javascript 数组的顺序

Question

我在页面上有数量可变的框，我使用 CSS3 列将它们放置在网格中，我知道我可以使用 float /内联 block /flexbox 等，但我需要为此布局使用 CSS3 列。

HTML 的结构如下:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

对于 float /内联 block 等，视觉顺序如下所示:

1 2 3
4 5 6
7 8 9

对于 CSS 列，视觉顺序不同，如下所示:

1 4 7
2 5 8
3 6 9

我可以通过像这样更改 HTML 结构来实现我想要的视觉顺序:

<div>
  <div>1</div>
  <div>4</div>
  <div>7</div>
  <div>2</div>
  <div>5</div>
  <div>8</div>
  <div>3</div>
  <div>6</div>
  <div>9</div>
</div>

但是，我不能一直手动执行此操作；我想要的是通过将遵守算法的 Javascript 以编程方式重新排序 HTML 元素。

我编写了一个执行以下操作的 JS 模块:

• 读取 CSS column-count 属性并将数字添加到主容器的 data-cols 属性
• 将所有盒子元素存储在一个变量中
• 清空容器
• 创建一个空数组
• 遍历每个存储的盒子元素并给它一个data-number属性——这是每个元素的索引
• 将操作框HTML推送到空数组
• 将数组转换为 HTML 并将其插回容器

所以现在，顺序根本没有改变，但我认为这是一个不错的起点。

我有这个设置的 CodePen here .

非常感谢任何帮助，谢谢!

Answer 1

这是你的笔的编辑版本。

http://codepen.io/anon/pen/MKxqmE?editors=1010

编辑:需要返回结果:p

你会注意到，我只做了一件事。我提取了处理排序的函数，并将其注入(inject)到 init 方法中。当然，这可以设计得更好，您可能不希望调整大小方法中的排序方法向下，但这只是为了展示基本思想。

您想将算法与处理结果的代码分开，这样您就可以随意注入(inject)不同的代码。一个很好的例子是原生的 es5 过滤器功能。 Filter 不知道我们要如何处理事情，所以它让我们注入(inject)我们的算法，它只为我们提供元素。

[1,2,3,4,5].filter(function(item) {
    return item > 3;
});
//=> [4,5]

我只是通过在 init 方法中注入(inject)你的每个函数来模仿这个，但你可以注入(inject)任何函数。它接受元素并对结果做一些事情。

编辑:我建议观看 sandi metz 的这段视频。它在 ruby​​ 中，但相同的基本原则几乎适用于 OOP 语言。特别是在 36:00 的那个位，当她谈到在你的算法中找到 Angular 色，然后注入(inject)这些 Angular 色的玩家时。 https://www.youtube.com/watch?v=9lv2lBq6x4A