Algoritmo para kerning divs

Question

Antes de sugerir algoritmos de bin bin, asumen que puede volver a ordenar los elementos y disponerlos de la forma que desee. Tenga en cuenta al leer que tengo una restricción sobre el orden y la disposición.

Así que, obviamente, no hay nada como kerning divs, pero es el término más apropiado que se me ocurre. Básicamente tengo muchos elementos en una página, divs e imgs, con ancho y alto fijos. Deben permanecer en orden (son cronológicos) y deben mostrarse de izquierda a derecha, de arriba abajo. Quiero "kern" los elementos de tal manera que el espacio en blanco sea lo más uniforme posible. Es una tarea muy fácil de lograr en sentido horizontal, pero el espacio en blanco vertical es más difícil. Se acepta un exceso de espacio en blanco excesivo alrededor del borde más exterior de los elementos empaquetados.

Estaba pensando como una solución realmente tonta, podría establecer el ancho máximo del área que se empacará a algo así como 1000px. Entonces podría mantener una matriz con 1000 índices, haciendo un seguimiento de la parte inferior de esa columna de píxeles en la pantalla. Cuando agrego un nuevo elemento, veo si se debe mover un poco hacia arriba en un espacio y si desplazarlo hacia la izquierda o hacia la derecha un poco permitiría que se moviera hacia arriba.

Como dije, esa es una solución realmente tonta. ¿Hay algún algoritmo que podría utilizar o alguien tuvo que lidiar con un problema similar de embalaje?

ACTUALIZACIÓN:

por preguntas en los comentarios. Los elementos tienen anchuras y alturas aleatorias. Mi caso de prueba es crear 100 etiquetas de imagen con imágenes de placekitten.com con anchuras y alturas aleatorias en el rango de 200-300px y organizar esas imágenes en la página en el orden en que se generan.

Crea una página html y escribe el código siguiente en tu cabeza para llegar a donde estoy (no hay comentarios sobre la calidad general del código, sé que hay algunas optimizaciones, literalmente lo lancé como una demostración en menos de 10 minutos):

<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

Tome un vistazo a la hermosa Masonry Plugin he usado para un problema similar.

Además, intente con complementos similares a Columnizer y jLayout.

Buena suerte.