Сплит-экран, основанный на количестве элементов и соотношении экрана

Question

Мне нужно разделить экран поровну (насколько возможно) с учетом динамического количества элементов.

Поэтому мне нужно найти количество столбцов и строк на основе размера/отношения экрана.

Размер каждого элемента не важен, так как я буду вычислять их в% на основе элементов в столбце и строке.

Если у меня есть 5 элементов, то (в зависимости от соотношения экрана) у меня, вероятно, будет 3 столбца в 1-й строке и 2 столбца во 2-й строке. Ничего страшного.

Answer 1

Сначала вы должны решить, что вы имеете в виду, «разделите экран одинаково». Это, вероятно, означает, что для каждого элемента есть предпочтительное соотношение x-to-y.

Вы можете использовать следующий алгоритм, который способствует приближению к желаемому соотношению x-to-y по уменьшению количества пустых пространств.

// Set this to the desired x-to-y ratio. 
const preferred_ratio = 1.2; 

function calc_cols_rows(In: screen, In: num_items, Out: num_rows, Out: num_cols) { 
    desired_aspect = (screen.width/screen.height)/preferred_ratio; 

    // Calculate the number of rows that is closest to the desired aspect: 
    num_rows = round(sqrt(num_items/desired_aspect)); 

    // Calculate the required number of columns: 
    num_cols = ceil(num_items/num_rows); 
}