线性分区，完美图片库

Question

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

http://www.chromatic.io/FQrLQsb

他们的画廊非常完美。我想实现同样的目标。我现在主要使用他们的线性-partition.js 文件，该文件可在 GitHub.

上找到

Johannes Treitz 在此处写了一篇博客 post：

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

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

生成的页面显示我的图片略微过大，因为该行中的最后一张图片下降到下一行并在画廊的下方造成蝴蝶效应，因此它看起来糟透了。

然而，在我 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) );
        }
    }

});

Answer 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 分配给每个图像的边距并将其从计算的宽度中删除，一切正常:)

线性分区，完美图片库

Linear Partitioning, Perfect Image Gallery

javascript

image

image-gallery

image-scaling