Question

在建议bin打包算法之前，他们假设您可以重新排序元素并以任何方式排列它们。请注意，我对订购和安排有限制。

所以很明显没有像kerning div这样的东西，但这是我能想到的最合适的术语。基本上我在页面上有很多元素，div和imgs，具有固定的宽度和高度。它们必须保持有序（它们是按时间顺序排列的）并且应该从左到右，从上到下显示。我想以这样的方式“克服”元素，以使空白尽可能均匀。水平实现这是一项非常容易的任务，但垂直空白更难。填充元素最外边缘周围的多余空白是不可接受的。

我认为这是一个非常愚蠢的解决方案，我可以将要打包的区域的最大宽度设置为1000px。然后我可以保持一个包含1000个索引的数组，跟踪屏幕上该列像素的底部。当我添加一个新元素时，我看它是否应该向上移动一个间隙，如果向左或向右移动一点就可以让它向上移动。

正如我所说，这是一个非常愚蠢的解决方案。有没有我可以使用的算法或有任何人必须处理类似的包装问题？

更新

评论中的每个问题。元素具有随机宽度和高度。我的测试用例是创建100个图像标签，其中包含来自placekitten.com的图像，其随机宽度和高度在200-300px范围内，并按照生成的顺序在页面上排列这些图像。

创建一个html页面，然后将下面的代码扔到你的脑海中以获取我的位置（请不要对一般代码质量发表评论，我知道有一些优化，我在10分钟内将它们作为演示放在一起）：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
var maxwidth = window.innerWidth - 80;
    function justify(row, filled)
    {
        var remaining = maxwidth - filled + 30,
            imgs = $('img',row),
            margin = Math.floor((remaining/imgs.length) / 2);
        $(imgs).each(function(){ this.style.marginLeft=margin+"px";this.style.marginRight=margin+"px"});
    }

    $(function()
    {
        var row = document.createElement('div'),
            filled = 0;
        document.body.appendChild(row);
        for (var i = 0; i < 100; ++i)
        {
            var img = document.createElement('img'),
                width = Math.floor(200 + Math.random() * 100),
                height = Math.floor(200 + Math.random() * 100);
            if ((filled + width) > maxwidth)
            {
                justify(row, filled);
                row = document.createElement('div');
                filled = 0;
                document.body.appendChild(row);
            }
            filled += width;
            img.src = "http://placekitten.com/" + width + "/" + height;
            row.appendChild(img);
        }
        justify(row,filled);
    })
</script>
<style>
    img{position:relative; vertical-align:middle}
</style>

Answer 1

看一下我用于类似问题的漂亮Masonry Plugin。

另外，请尝试类似Columnizer和jLayout的插件。

祝你好运。

字距调整算法

1 个答案: