El diseño Isotope fitColumns hace que el contenedor se quede en blanco

Question

Consulte http://jsfiddle.net/cUcFd/5/ - tenga en cuenta que si cambia el layoutMode a 'masonry' o 'fitRows', funciona bien. Pero con 'fitColumns' está simplemente en blanco, y todos los bloques desaparecen.

Parece que hay requisitos en cuanto a qué estilos se establecen en el contenedor y los elementos para que el modo fitColumns funcione, pero no puedo encontrar ninguna documentación sobre lo que son.

Answer 1

Por qué se no funciona

fitColumns es una "disposición horizontal", por lo que es la intención de ir a un lado en lugar de arriba y abajo - similar a un juego de desplazamiento lateral. Dado su diseño, diseños horizontales requieren un atributo de altura, tal como se documenta aquí: http://isotope.metafizzy.co/layout-modes.html#horizontal-layouts

solución estática

Quiero llenar el ancho del contenedor con sin embargo muchas columnas en forma, y ​​lo quiero para ocupar tanto espacio vertical como sea necesario.

Quiere utilizar masonry en lugar de fitColumns. Configurar el columnWidth le permitirá llenar el ancho del contenedor y usar tanto espacio vertical como sea necesario. Por ejemplo: http://jsfiddle.net/cUcFd/22/

$('#container').isotope({ 
    itemSelector : '.block', 
    // layoutMode: 'fitColumns', 
    layoutMode: 'masonry', 
    masonry: { 
     columnWidth: 100 
    } 
}); 

solución dinámica

Suponiendo que usted no conoce el ancho de las columnas y quiere encontrar de forma dinámica, se podría basar fuera el elemento más ancha de usar algo como #container el código proporcionado aquí: https://stackoverflow.com/a/8853777/1786459

Por ejemplo: http://jsfiddle.net/cUcFd/24/

var column_width = Math.max.apply(null,$('#container .block').map(function(){return $(this).outerWidth(true);}).get()); 

Sin embargo, le corresponde a usted determinar el método más apropiado para establecer el ancho de la columna.

Answer 2

Intente establecer un ancho y alto para su contenedor. Cuando usa layoutMode:'fitColumns', debe dar a todos los elementos una propiedad flotante que ya no llene el contenedor.

También es posible que desee establecer resizesContainer:false