线性分区，完美图库答案

【问题标题】：Linear Partitioning, Perfect Image Gallery线性分区，完美图库
【发布时间】：2015-10-21 03:17:39
【问题描述】：

以前有人看过这个页面吗，来自 Chromatic.io？

http://www.chromatic.io/FQrLQsb

他们的画廊是完美的。我想实现同样的目标。我现在主要使用的是 GitHub 上提供的 linear-partition.js 文件。

Johannes Treitz 在这里写了一篇关于它的博文：

https://www.crispymtn.com/stories/the-algorithm-for-a-perfectly-balanced-photo-gallery

我有完美的图像分区。它赋予每张图像的权重也是完美的。我已经能够通过使用与彩色完全相同的标记和相同的原始图像来测试这些值。通过在我的窗口和他们的窗口之间切换，我可以看到分区值是相同的。

结果页面显示我的图片有点太大了，因为该行中的最后一张图片会下降到下一行，并在画廊的下方产生蝴蝶效应，看起来很糟糕。 em>

但是，在我使用width / height 计算图像的纵横比时，Chromatic.io 显然在做其他事情。 531 x 800 的图像产生 0.66375 的宽高比。而他们正在计算服务器端的纵横比，并且他们得到 0.6645454545454546。我无法理解他们是如何得出这个数字的。他们在算法中添加了什么来获得这个数字？

这同样适用于他们的风景图片 800 x 531。我得到的纵横比与他们的不同，而且，他们得到不同的纵横比（+- 0.002），但他们的所有风景图像都是相同的。

对于这个相当冗长的代码片段，我深表歉意，但可能是我做错了什么，所以对于任何知道这是如何工作的人来说，这里是：

$(window).load(function () {

    var p = $('.photo');
    $(p).each(function ()
    {
        var h = $(this).find("img").height();
        var w = $(this).find("img").width();
        $(this).attr({ 'data-aspect-ratio': w / h });
    });

    var photos = p.toArray();
    var viewport = $('.images').width();
    var ideal_height = parseInt( $(window).height() / 2 );
    var summed_width = photos.reduce(function(sum, img)
    {
        return sum += $(img).data('aspect-ratio') * ideal_height;
    }, 0);
    var rows = Math.round( summed_width / viewport );

    var weights = photos.map(function (img) {
        return parseInt($(img).data('aspect-ratio') * 100);
    });
    var partition = linear_partition(weights, rows);

    var index = 0;
    for( var i in partition )
    {
        var summed_ratios;
        row_buffer = [];

        for( var j = 0; j < partition[i].length; j++ )
        {
            row_buffer.push(photos[index++])
        }

        summed_ratios = row_buffer.reduce(function (sum, img)
        {
            return sum += $(img).data('aspect-ratio');
        }, 0);

        for( var j = 0; j < row_buffer.length; j++ )
        {
            var img = row_buffer[j];
            $(img).width( parseInt(viewport / summed_ratios * $(img).data("aspect-ratio")) );
            $(img).height( parseInt(viewport / summed_ratios) );
        }
    }

});

【问题讨论】：

可能在服务器端，一小部分的边距被认为是图像的一部分？
我尝试摆弄数字 532,530 或 801,799 等，但没有数字接近。这就像他们在添加分数或其他东西。这让我很烦恼，因为他们所拥有的结果是一个工作网格。这个算法需要一个恒定的偏移量才能工作，这似乎很奇怪。
涉及一些舍入。你读过the solution吗？
var rows = Math.round( summed_width / viewport );我已经四舍五入了。

标签： javascript image image-gallery image-scaling

【解决方案1】：

我找到了解决方案。其实很简单。算法和代码很到位。事实证明，图像在所有边上都有 2px 的边距，代码考虑到了这一点。这意味着每个图像的宽度超出 4px 并导致溢出。为了解决这个问题，我简单地做了以下事情：

},0);......]

    for( var j = 0; j < row_buffer.length; j++ )
    {
        var img = row_buffer[j];
        $(img).width( parseInt(viewport / summed_ratios * $(im
        g).data("aspect-ratio")) - <get_image_margin> );

        $(img).height( parseInt(viewport / summed_ratios) );

    }

通过检索 CSS 分配给每个图像的边距并将其从计算的宽度中删除，一切正常 :)

【讨论】：