Jquery Isótopo: ¿Cómo llenar las lagunas vacías?

Intenté básicamente cada sugerencia/sugerencia/consejo para lograr eso, pero aun así, obtuve estos espacios feos vacíos mientras usaba Isotopo.Jquery Isótopo: ¿Cómo llenar las lagunas vacías?

Aquí hay un demo showing the problem que estoy experimentando.

¿Ves estos espacios en blanco? ¿Hay algún código jquery para hacer que los elementos inferiores llenen un poco estos espacios en blanco siempre que haya alguno?

SI utilizamos un único ancho para todos los elementos, el problema no se muestra en absoluto. Comienza a aparecer cuando se usan anchuras diferentes para cada artículo. Isotopo no es lo suficientemente inteligente como para buscar huecos vacíos y llenarlos si hay un artículo de tamaño apropiado disponible.

¿Algún ayuda? ¡Estoy realmente atorado!

pregunta complementaria que pueda ayudar a resolver este problema:

¿Hay algún plugin de jQuery que obliga a los elementos de flotación? ¡Creo que podría forzar el ajuste de elementos para llenar los espacios vacíos!

Fuente

2012-08-24 Adame Doe

Creo que tendrá que escribir algunos javascript y corregirlos manualmente. –

No soy un tipo codificador: ~) Solo uso lo que hay allí: ~ D, entonces, ¡escribir algo desde cero no es una opción para mí! –

Según la última edición, ahora existe un packery layout mode for isotope. La respuesta original y las adiciones posteriores permanecen debajo.

Esta característica ha sido solicitada por los demás, así:

En resumen, la respuesta actual parece ser que si se quiere evitar vacíos por completo usted debe:

Elija un ancho fijo
organizar cuidadosamente sus elementos con con respecto a sus tamaños, por lo que no es posible ningún espacio en los anchos elegidos.

Por supuesto, si sus artículos no son estáticos en tamaño y ubicación, o si no puede establecer un ancho, no me puedo imaginar que eso funcionaría demasiado bien.

Si no funciona para usted la organización manual de los elementos para llenar las lagunas de un contenedor de ancho fijo, le recomiendo que lo haga con un +1 en el primer enlace.

E (4.22.2013): Noté alguna actividad reciente, por lo que una actualización rápida. Todo esto está disponible en la edición de mampostería n.º 141, el primer enlace:

PerfectMasonry es una extensión de diseño para Isotopo. Llena las lagunas al proporcionar un layoutMode "perfectMasonry" y opciones que proporcionan un diseño libre de huecos.

Nested es una biblioteca alternativa para diseños sin brechas.

Packery es una biblioteca creada por el creador de Isotope que admite diseños libres de huecos y más.

No he usado personalmente ninguno de estos (todavía).

Por último, en his blog post about Packery's release, DeSandro declara: "Eventualmente, me gustaría trasladar esta y otras soluciones desarrolladas en Packery a Masonry e Isotope".

No contaría con que eso ocurra increíblemente pronto. Packery solo se lanzó durante 7 días a partir de esta edición.

E2 (06/13/2014):

DeSandro ha lanzado una packery layout mode for isotope.

Fuente

2012-08-24 23:00:36 cjc343

Gracias por la respuesta. Sin embargo, no resuelve el problema. Ya revisé los enlaces de arriba desde la página de Github del plugin, y hasta ahora no tengo suerte. Esperaba que alguien encontrara una solución hecha a mano: ~) ya que el creador del complemento no hará nada a menos que sea ampliamente solicitado. –

Soy consciente de que no resuelve el problema, pero presenta la única opción actualmente disponible sin implementar un nuevo modo de diseño o esperando que desandro (u otra persona) implemente uno. – cjc343

¡Sí! Gracias por su aporte: ~) –

Traté de explicar por qué esto es in this duplicate thread que incluye un violín para jugar también. No es necesariamente el ancho fijo, si tiene muchos elementos pequeños como en la demostración original, la probabilidad de un ajuste perfecto es alta, pero no está garantizada. Puede usar un complemento alternativo como jQuery Tiles o tratar de adaptar Wookmarks.

No es trivial de implementar en su caso, consulte what's involved y busque algunas imágenes relacionadas, verá la complejidad involucrada.

Fuente

2012-08-25 15:41:15 Systembolaget

No debería ser tan complicado: ~) Quiero decir, en la demostración que publiqué, los artículos tienen un tamaño de crecimiento lógico. Tienen un tamaño de base que se puede multiplicar, por lo que cabe varias columnas o filas. En mi imaginación, necesitamos algún complemento que simplemente fuerce elementos flotantes para llenar los espacios vacíos. Parece y suena simple: ~ D, pero no sé por qué nadie podría lograr eso! –

He intentado Wookmarks. No admite anchos variables. El creador de este complemento dice que admite solo un conjunto de ancho que se ajuste a sus necesidades ... Por lo tanto, no lo ampliará para admitir elementos de ancho múltiple. –

jQuery Tiles parece viejo y no se ha actualizado durante mucho tiempo ... No pude encontrar una demo consistente ... Así que lo dejé. Pero gracias por los consejos: ~) –

Jquery Isótopo: ¿Cómo llenar las lagunas vacías?

Respuesta

Cuestiones relacionadas