Javascript div的紧排算法

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

很明显，没有紧排div这个词，但这是我能想到的最合适的术语。基本上，我在一个页面上有很多元素，div和img，具有固定的宽度和高度。它们必须保持顺序（按时间顺序排列），并且应该从左到右、从上到下显示。我想以一种使空格尽可能统一的方式来“kern”元素。这是一个很容易实现的横向任务，但纵向空白更难。可接受压缩元素最外边缘周围不均匀的多余空白

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

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

更新：

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

创建一个html页面，并在您的脑海中输入以下代码以了解我的位置（请不要对一般代码质量发表评论，我知道有一些优化，我在不到10分钟的时间内以演示的形式将其组合在一起）：

var maxwidth=window.innerWidth-80；
函数调整（行，已填充）
{
剩余var=最大宽度-填充+30，
imgs=$（'img'，第行），
裕度=数学楼层（（剩余/imgs.长度）/2）；
$（imgs）.each（函数（）{this.style.marginLeft=margin+“px”；this.style.marginRight=margin+“px”}）；
}
$（函数（）
{
var row=document.createElement（'div'），
填充=0；
document.body.appendChild（行）；
对于（变量i=0；i<100；++i）
{
var img=document.createElement（'img'），
宽度=数学地板（200+数学随机（）*100），
高度=数学地板（200+数学随机（）*100）；
如果（（填充+宽度）>最大宽度）
{
证明（行，填写）；
行=document.createElement（'div'）；
填充=0；
document.body.appendChild（行）；
}
填充+=宽度；
img.src=”http://placekitten.com/“+宽度+”/“+高度；
行。追加子行（img）；
}
证明（行，填写）；
})
img{位置：相对；垂直对齐：中间}

看看我在解决类似问题时使用的漂亮工具

另外，尝试类似的插件，如和

---

祝你好运。

你是否尝试过jquery插件来固定它们的高度，或者在jquery中一次获取“n”个元素的高度，然后从行的开始到结束对元素进行标准化，并在每行重复？或者类似的？你试过什么？@MyStream我没有试过处理垂直高度，但我可以很好地在水平行上对齐元素。难点在于垂直间距。使元素的大小都相同，这就违背了问题的核心，在页面上看起来也不那么有趣。元素的宽度是否不同？或者它更像是不同高度的柱子？“现在的屏幕截图和以后的屏幕截图可能会让你的问题更容易理解。@Alex高度和宽度都在一定范围内随机。目前，我正在从placekitten中提取100张图片，图片大小在200px和300px之间（不是正方形，宽度和高度分别由

200+Math.random（）*100

）生成），并将它们排列在页面上。正如我所说，水平排列很容易，垂直排列很难。稍后我会考虑组装一些屏幕，但我必须对想要的外观进行photoshop处理，而且我的PS很烂。干杯！砌石看起来非常棒，一定会让它旋转并报告回来。砌石做了一个很好的尝试，所以我接受这个答案，但是，我决定使用一个解决方案，我创建了一个固定高度和宽度的模板，不同的内部布局，我适合我的内容到该布局。这将产生一个更干净、填充更好的页面。当物品的大小存在显著差异时，砖石结构会留下大量的缺口。

<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>