Algorytm dla div kerningu

Question

Zanim zaproponujesz algorytmy pakowania bin, zakładają, że możesz ponownie zamówić elementy i ułożyć je w dowolny sposób. Zauważ, że czytasz, że mam ograniczenie dotyczące zamawiania i aranżacji.

Tak oczywiście nie ma czegoś takiego jak kerningiem div, ale jest to najwłaściwsze określenie mogłem myśleć. Zasadniczo mam wiele elementów na stronie, div i imgs, o stałej szerokości i wysokości. Muszą pozostać w porządku (są chronologiczne) i powinny być wyświetlane od lewej do prawej, od góry do dołu. Chcę "kernować" elementy w taki sposób, aby białe znaki były jak najbardziej jednolite. To bardzo proste zadanie osiągnąć poziomo, ale pionowe białe znaki są trudniejsze. Nierówne nadmiarowe odstępy wokół najbardziej zewnętrznej krawędzi zapakowanych elementów są dopuszczalne.

Myślałam jako naprawdę głupiego rozwiązania, mogę ustawić max szerokość obszaru, który ma być pakowany do czegoś podobnego 1000px. Wtedy mógłbym utrzymać tablicę z 1000 indeksami śledzącymi dół tej kolumny pikseli na ekranie. Kiedy dodaję nowy element, widzę, czy powinien on zostać przesunięty nieco w szczelinę, a jeśli przesunięcie go w lewo lub w prawo trochę pozwoli na jego przesunięcie w górę.

Jak powiedziałem, że to naprawdę głupie rozwiązanie. Czy są jakieś algorytmy, z których mógłbym skorzystać, czy ktoś musiał poradzić sobie z podobnym problemem z pakowaniem?

UPDATE:

Na pytania w komentarzach. Elementy mają losowe szerokości i wysokości. Mój przypadek testowy polega na utworzeniu 100 znaczników obrazu z obrazami z witryny placekitten.com o losowych szerokościach i wysokościach w zakresie 200-300 pikseli i rozmieszczeniu tych obrazów na stronie w kolejności ich generowania.

Stwórz stronę html i wrzuć poniższy kod w głowę, aby dostać się tam, gdzie jestem (proszę nie komentować ogólnej jakości kodu, wiem, że są pewne optymalizacje, dosłownie zrzuciłem to razem jako demo w mniej niż 10 minut):

<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

Spójrz na pięknej Masonry Plugin kiedyś na podobnym problemem.

Spróbuj też podobne pluginy jak Columnizer i jLayout.

Powodzenia.