Список заказанных тремя столбцами

Question

У меня есть список категорий, которые я хотел бы показать в 3 столбцах, упорядоченных по имени. Я использую ul и li с CSS

li { 
    float: left; 
    width: 33%; 
} 

, так что я могу просто цикл по каждой категории. Это работает отлично, за исключением одного вопроса, заказа. Я бы хотел, чтобы список упорядочивался по алфавиту, но по столбцу. Для того, чтобы продемонстрировать, если у меня есть 7 категорий, от А до G, в настоящее время он выглядит как

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

Я хотел бы, чтобы это выглядело как

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

Есть ли способ для достижения этой цели?

Answer 1

Есть два способа преодолеть это. И включает в себя группировку список в 3 группы, которые могут быть достигнуты с помощью in_groups_of, но вам необходимо пройти ряд элементов, которые должны принадлежать в группе

@categories = ('A'..'G').to_a 

total_per_column = (@categories.size/3.0).ceil 
@categories = @categories.in_groups_of(3, false) 

Вам необходимо пройти false, поэтому он не будет пытаться заполнить недостающие элементы, то есть последняя группа будет содержать только «G»

Далее следуют два варианта:

1. использование 3 ul, которые плавали слева

   <% @categories.each do |categories| %> 
       <ul> 
       <% categories.each do |category| %> 
       <li><%= category %></li> 
       <% end %> 
       </ul> 
   <% end %> 
   

2. или использовать какую-то логику, как показано ниже

   <ul> 
       <% total_per_column.times do |index| %> 
       <% @categories.each do |categories| %> 
        <% if category = categories[index] %> 
        <li><%= category %></li> 
        <% end %> 
       <% end %> 
       <% end %> 
   </ul> 
   

Я лично предпочитаю первый, потому что это проще. :)

Answer 2

@array = [A..Z] 
$i = 0 
$j = 0 
    while $i < $array.count do 
    <ul> 
     while $j < 3 
     <li> 
     puts @array[$i] 
     </li> 
     $j +=1 
     end 
     $i +=1 
    </ul> 
    end 

Используйте эту концепцию вложенного цикла.

Answer 3

xs = %w(a b c d e f g) 
xs.in_groups(3).transpose 
#=> [["a", "d", "g"], ["b", "e", nil], ["c", "f", nil]] 

И теперь, когда элементы ряда хорошо расположены, нарисуйте стол.