ruby/splitting数组到列中

我可以发现使用正确的命名,但到目前为止没有弹出任何东西.我期待将数组拆分成列.

意思是[0,1,2,3,4,5,6,7,9],我想拥有4个数组(4列):

[ [0,4,9], [1,5], [2,6], [3,7] ]

实际上,我会研究迭代一个活动的记录数组,在4个不同的html列中显示它们(它们是图像记录),同时从左到右保持它们的顺序

Rails解决方案

在rails中,您可以简单地执行:

ary = [0,1,2,3,4,5,6,7,8,9]
ary.in_groups_of(4).transpose.map(&:compact)
  #=> [[0, 4, 8], [1, 5, 9], [2, 6], [3, 7]]

说明:

in_groups_of是一个添加到Array类的酷rails方法,其行为非常相似each_slice,不同之处在于它保证所有数组的大小相同.这一点非常重要,以便我们transpose以后可以使用.此方法返回行的数组.

现在,transpose- 另一个值得了解的很酷的方法.它需要一个数组数组,所有内部数组必须是相同的长度(所以实际上这代表一个矩形矩阵).它做什么 - 它返回目标数组中的列数组.

现在我们需要摆脱nils(除非他们不打扰你),所以我们运行compact每一列,我们有你想要的.

纯红宝石溶液:

我们没有in_groups_of这样做,没有它我们需要实现相同的行为:

ary.each_slice(4).map {|a| a.fill nil, a.size, 4 - a.size}.transpose.map(&:compact)

实际上,我会研究迭代一个活动的记录数组,在4个不同的html列中显示它们(它们是图像记录),同时从左到右保持它们的顺序

除非是表格数据,否则不应使用表格来显示数据.图像不是表格数据,这意味着特定图像在给定列/行的位置完全不相关.总有一种更好的方法可以做到这一点.

在你的情况下,我会建议纯CSS解决方案(haml):

%ul.images
  - @images.each do |i|
    %li= image_tag i.iamge_url    # or sth

然后在你的CSS(scss):

ul.images {
  width: 100%;
  font-size: 0;    # remove whitespace between li elements
  li {
    display: inline-block;
    width: 25%;   # forcing 25% without whitespaces guarantees 4 column
  }
}

此模型的主要优点是您可以使列数取决于媒体查询,因此每行显示不同数量的图像,具体取决于您的用户屏幕大小(对于移动设备很重要).

如果你觉得更冒险,你讨厌IE并且不关心它的用户,那就去看看弹性盒子吧.有一天它可能成为一个标准,并且已经可以在许多页面上看到.