javascript - 紧缩 div 的算法

Question

在建议装箱算法之前，他们假设您可以重新排序元素并按照您喜欢的方式排列它们。请注意，当您阅读时，我对顺序和安排有限制。

很明显，没有 kerning div 这样的东西，但这是我能想到的最合适的术语。基本上我在页面上有很多元素，div 和 imgs，具有固定的宽度和高度。它们必须保持顺序(它们是按时间顺序排列的)并且应该从左到右、从上到下显示。我想以一种使空白尽可能统一的方式“紧缩”元素。横向实现很容易，但纵向留白比较困难。打包元素最外边缘周围不均匀的多余空白是可以接受的。

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

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

更新:

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

创建一个 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 .

祝你好运。