Javascript 线性分区，完美的图像库

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

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

Johannes Treitz在这里写了一篇博客文章：

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

生成的页面显示，我的图像有点太大，因为行中的最后一个图像会下降到下一行，并在画廊的下方产生蝴蝶效应，看起来很糟糕

然而，当我计算图像的纵横比时，

width/height

，color.io显然在做其他事情。531 x 800图像的纵横比为0.66375。然而，他们正在计算服务器端的纵横比，得到0.664546。我无法理解他们是如何得出这个数字的。为了得到这个数字，他们在算法中添加了什么

这同样适用于他们的风景图像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) );
        }
    }

});

$（窗口）。加载（函数（）{
var p=$（'.photo'）；
$（p）.每个（函数）
{
var h=$（this.find（“img”）.height（）；
var w=$（this.find（“img”）.width（）；
$（this.attr（{‘数据纵横比’：w/h}）；
});
var photos=p.toArray（）；
var viewport=$（'.images'）.width（）；
var ideal_height=parseInt（$（窗口）.height（）/2）；
var summated\u width=photos.reduce（函数（sum，img）
{
返回和+=$（img）.数据（'纵横比'）*理想高度；
}, 0);
var rows=Math.round（总宽度/视口）；
变量权重=photos.map（函数（img）{
返回parseInt（$（img）.data（'aspect-ratio'）*100）；
});
var分区=线性分区（权重、行）；
var指数=0；
for（分区中的变量i）
{
风险价值比率；
行缓冲区=[]；
对于（var j=0；j

我找到了解决方案。其实很简单。算法和代码非常准确。事实证明，这些图像的所有侧面都有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) );

    }

}，0）；…]
对于（var j=0；j

---

通过检索CSS分配给每个图像的边距，并将其从计算的宽度中删除，一切都很顺利：）

也许服务器端的图像中会有一个小边距？我尝试了摆弄数字532530或801799等，但没有一个数字接近。就像他们在上面加了一个分数什么的。这让我很烦恼，因为他们所拥有的结果是一个工作网格。这个算法需要一个恒定的偏移量才能工作，这似乎很奇怪。其中涉及到一些舍入。你读了吗？var rows=Math.round（总宽度/视口）；我已经准备好了。