jquery - packery - Albañilería que da la altura del contenedor 0

masonry js responsive

Question

Estoy trabajando en algunas cosas que implican un diseño receptivo de mampostería. Tengo un contenedor que tiene un ancho máximo de 960px pero se reduce con el navegador. Los elementos de mi grilla tienen un ancho basado en porcentajes (100%, 66.666666% en peso, 33.33333% en peso). Por alguna razón, cuando paso una función a la opción columnWidth , siempre le da al contenedor una altura de 0. Así es como estoy creando instancias de Masonry.

$(window).load(function() {
  var $container;
  $container = $("#grid_container");
  $container.masonry({
    columnWidth: function(containerWidth) {
      return containerWidth / 3;
    },
    itemSelector: ".grid_item",
    isFitWidth: true,
    isResizable: true,
    gutter: 10
  });
});

¿Alguna idea de por qué estaría haciendo esto? Como estoy usando $(window).load , debería poder calcular la altura fina. ¿Me estoy perdiendo algo realmente obvio aquí? ¿Simplemente no es posible usar el ancho de columna porcentual con mampostería?

Answer 1

En mampostería, un tipo de función no es un valor permitido para la propiedad columnWidth .

Intente en cambio:

1. Pase un selector de CSS (por ejemplo, .grid_box ) como la propiedad columnWidth .
2. En CSS, agregue el selector al ancho de porcentaje apropiado de su contenedor primario (e..g, .grid_box{ width: 20%; } ).
3. Para su HTML, agregue un <div class="grid_box"></div> vacío al contenedor.