Problema de isótopo con el cuadro de diálogo jQuery

Question

Es un poco difícil explicar mi problema pero intentaré usar imágenes.

Demostración: http://jsfiddle.net/H8Qbn/13/

Trato de organizar automáticamente los cuadros de diálogo jQuery utilizando isótopos.

• La primera imagen muestra que todo está funcionando bien.

• La segunda imagen muestra lo que ocurre cuando se trata de cambiar el tamaño de la ventana de diálogo primera jQuery. Está cambiando de tamaño muy bien y todos los demás cuadros de diálogo se organizan automáticamente.

• Cuando intento de organizar la segunda diálogo primero se desplaza según su posición (superior, izquierda) y luego se cambia el tamaño y todos los otros cuadros de diálogo no están dispuestos de forma automática.

• El tercero de diálogo se comporta exactamente igual que 2. Se mueve según su posición (superior, izquierda) y no está dispuesto de forma automática.

¿Alguna sugerencia?

Answer 1

Isotopo no está hecho para cuadros de diálogo que se pueden arrastrar; ver what the plugin author says con respecto a este tipo de funcionalidad.

EDITFiddled around with a few more things y obtuve el diseño para reorganizar cuando se cierra un cuadro de diálogo con .remove(); sin embargo, arrastrar no está soportado (ver arriba) y cambiar el tamaño manualmente tampoco funcionará. ¿Por qué es necesario cambiar el tamaño manualmente de los cuadros de diálogo? ¿No se puede hacer eso programáticamente?

Answer 2

El plugin de mampostería jquery puede calcular la nueva posición cuando la llama con la función de mampostería ("recargar") en el contenedor circundante después de haber cambiado el tamaño de los cuadros de diálogo o agregar o quitar elementos. Lo usé en mi Javascript cuando agregué o eliminé una imagen en el contenedor que me rodeaba. Puede ver el plugin Masonry trabajando en vivo en mi página web en la dirección web http://www.chihoang.de.

Esta es mi prepend y añadir la función de mampostería ("recargar") al final:

  if (ele.Additem == "Append") { 
      container.append($j("#brickTemplate").tmpl(ele).css({ 
      "display": "block" 
      })).masonry('reload'); 
     } else if (ele.Additem == "Prepend") { 
      container.prepend($j("#brickTemplate").tmpl(ele).css({ 
      "display": "block" 
      })).masonry('reload'); 
     } 

y este es mi función Remove:

 $j('.brick').remove(":contains('" + ele.Headline + "')"); 
     container.masonry('reload');