divをカーニングするアルゴリズム

Question

ビンパッキングアルゴリズムを提案する前に、要素を並べ替えることができ、好きなように配置することができます。私が注文と手配に制限があることを読んだときに注意してください。

明らかに、カーニングdivsはありませんが、それは私が考えることができる最も適切な用語です。基本的には、幅と高さが固定されたdivsとimgsのページに多くの要素があります。彼らは順番に（順番に）続けなければならず、左から右、上から下に表示する必要があります。私は空白を可能な限り均一にするような方法で要素を "カレンダー"したいと思う。水平にするのはとても簡単な作業ですが、垂直方向の空白は難しくなります。パックされた要素の最も外側のエッジの周りの不均一な余白が許容されます。

私は本当にばかばかしい解決策だと思っていました。パックする領域の最大幅を1000pxのように設定することができました。次に、1000のインデックスを持つ配列を保持して、画面上のピクセルの列の底を追跡することができました。私は新しい要素を追加するときに、少し上にギャップに移動する必要があるかどうかを確認し、左右にシフトすると少し上に移動することができます。

私が言ったように、それは本当にばかばかしい解決策です。私が使用できるアルゴリズムがありますか、それとも誰かが同様の問題を処理しなければならなかったのですか？

UPDATE：コメント欄で質問パー

。要素の幅と高さはランダムです。私のテストケースは、200〜300ピクセルの範囲でランダムな幅と高さを持つplacekitten.comの画像を含む100個のイメージタグを作成し、生成された順番でページ上に配置することです。

htmlページを作成し、私の所在地に下のコードをスローします（一般的なコードの品質に関するコメントはありません。いくつかの最適化があることを知っています。 ）：

<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のような同様のプラグインを試してください。

幸運。