Question

我有四列的布局，我想尽可能地向每列添加图像。没有问题，如果我有60张图像，那么每列我会有15张图像，但如果我有43或55或任何其他不均匀数量的图像怎么办？如果我将55除以4，我得到13.75。如何计算得到14 + 14 + 14 + 13的结果？

第1列= 14

第2栏= 14

第3栏= 14

第4栏= 13

Answer 1

首先，使用ceil向上舍入，计算每列的图像数量：

$number_of_columns = 4;
$images_per_column = ceil(count($images) / $number_of_columns);

然后，使用array_chunk将$images数组拆分为该大小的块（最后一个会变小）：

$image_columns = array_chunk($images, $images_per_column);

然后你将拥有一个多维数组 - 一个包含4个图像数组的数组。

你可以这样循环：

<?php foreach ($image_columns as $images_in_column): ?>
<div class="column">
  <?php foreach ($images_in_column as $column_image): ?>
    <img src="<?php echo $column_image; ?>" />
  <?php endforeach; ?>
</div>
<?php endforeach; ?>

Answer 2

首先，计算每列的最小图像数。然后计算余数。然后将剩余部分分散到前N列。

以下是如何在Javascript中执行此操作。 split（）函数适用于任意数量的列。

function split(n_images, num_of_columns) {

    var min = Math.floor(n_images / num_of_columns);
    var remainder = n_images % num_of_columns;
    var columns = Array.apply(null, Array(num_of_columns)).map(function(value, index) {
        return (index < remainder? min + 1: min);
    });
    return columns;
}

var n_images = 55;
var num_of_columns = 4;
var columns = split(n_images, num_of_columns);

如何为列分割不均匀的图像数量

2 个答案: