jQuery: Plugin como mampostería para superar el orden de dom y 3 tamaños de elementos

responsive-design media-queries

Question

Esto podría ser difícil de explicar. ¿Existe un complemento similar como la mampostería jQuery que sea capaz de detectar espacios en una cuadrícula predefinida y mover y posicionar elementos que encajarían en estos espacios?

Dado que todas las otras formas de explicar mi pregunta serían complicadas, he dibujado una imagen simple para mostrar lo que quiero decir.

Aviso: Es un diseño web de respuesta fluida.

Así que mi orden de dom es 1,2,3. Sin embargo, al colapsar mi diseño dentro de una determinada media-query quiero cambiar dinámicamente el orden de dominación o colocar los elementos de manera diferente. Tal como ves en mi muestra.

Sé que hay cosas como jQuery Masonry o jQuery Isotope pero ambos complementos no llenan todos los espacios vacíos de la cuadrícula. Por ejemplo, echa un vistazo a esta captura de pantalla isótopo ...

Falta un elemento. Por supuesto, en la mayoría de los casos, esto es lo que desea mantener el orden de los elementos. En mi caso no me importa el pedido, solo quiero tener todos los espacios y huecos llenos. Entonces, exactamente como se ve en mi bosquejo anterior, el item-nr-3 debe moverse hacia arriba para ajustar el espacio vacío (ya que encajaría). Y si hubiera otro item del mismo tamaño, cabría en el espacio debajo del item-nr-3 .

¿Es eso de alguna manera posible? ¿Hay algún complemento de jQuery que haga eso? ¿O tienes alguna otra ida?

Alguna información adicional: los items y los cuadros de los que estoy hablando están configurados en box-sizing:border-box por lo que no tengo que preocuparme por los rellenos o los márgenes.

Actualización: Aquí hay una muestra en vivo del problema: http://jsfiddle.net/r79u2/1/

Answer 1

EDITAR

Desde el momento de publicar esto, he agregado soporte de "canales" y devoluciones de llamada.

Escribí un plugin que hace lo que estás buscando. No EXACTAMENTE, pero podría usarlo para apuntarle en la dirección correcta ...

Plugin - https://github.com/DrewDahlman/Mason

Publicación en el blog sobre teoría - http://www.drewdahlman.com/meusLabs/?p=218

La idea es esta: sabemos que tenemos una serie de elementos, el trabajo de Mason es llenar un espacio definido con estos elementos que se dejan flotar a la izquierda. Esto genera "brechas", por lo que necesitamos detectar esas brechas y de alguna manera llenarlas con algo. . Para hacer esto, podemos copiar un elemento ya existente o, podemos tener un grupo de elementos de "relleno" en los que podemos llenar ese espacio.

OP - si está buscando una cuadrícula de tamaño aleatorio con algún control, esto hará el trabajo. He hecho este violín - http://jsfiddle.net/bdGVr/

Notará que cada vez que lo ejecuta o cambia el tamaño de la ventana, la cuadrícula vuelve a dibujarse. Esto dará como resultado que se rellenen los huecos con un bloque rojo.

Jugando con las opciones de mason.js puedes ajustar la proporción que es el tamaño en relación con el contenedor, así como los posibles combos de tamaño.

ejemplo: una relación de 1.8 y un tamaño de 1x3 significa 1.8 x 1 = Altura, y 1.8 x 3 = Ancho.