意思是,有[0,1,2,3,5,7,9],我想有4个数组(4列)：
[[0,4,[1,5],[2,6],[3,7]]
实际上,我会研究迭代一个活动的记录数组,在4个不同的html列中显示它们(它们是图像记录),同时从左到右保持它们的顺序
解决方法
在rails中,您可以简单地执行：
ary = [0,6,8,9] ary.in_groups_of(4).transpose.map(&:compact) #=> [[0,8],7]]
说明：
in_groups_of是一个添加到Array类的cool rails方法,其行为与each_slice非常相似,不同之处在于它保证所有数组的大小相同.这很重要,所以我们以后可以使用转置.此方法返回行的数组.
现在,转置 – 另一个值得了解的酷方法.它需要一个数组数组,并且所有内部数组必须具有相同的长度(因此实际上这代表一个矩形矩阵).它做什么 – 它返回目标数组中的列数组.
现在我们需要摆脱nils(除非他们不打扰你),所以我们在每个列上都运行compact,我们正是你想要的.
纯ruby溶液：
我们没有in_groups_of所以我们需要在没有它的情况下实现相同的行为：
ary.each_slice(4).map {|a| a.fill nil,a.size,4 - a.size}.transpose.map(&:compact)
更好地解决实际问题
Practically,I’d look into iterating over an active record array,
displaying those (they’re images records) in 4 different html columns,
while maintaining their order from left to right
除非是表格数据,否则不应使用表格来显示数据.图像不是表格数据,这意味着特定图像在给定列/行的位置完全不相关.总有一种更好的方法可以做到这一点.
在你的情况下,我会建议纯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并且不关心它的用户,那就去看看弹性盒子吧.有一天它可能成为标准,并且已经可以在许多页面上看到.