Isotope fit Il layout delle colonne causa la scomparsa del contenitore

Question

Vedere http://jsfiddle.net/cUcFd/5/ - nota che se si modifica la modalità di layout su "muratura" o "fitRows" funziona correttamente. Ma con 'fitColumns' è semplicemente vuoto, e tutti i blocchi scompaiono.

Sembra che ci siano dei requisiti su quali stili sono impostati sul contenitore e sugli articoli affinché la modalità fitColumns funzioni, ma non riesco a trovare alcuna documentazione su cosa siano.

Answer 1

perché è non funzionava

fitColumns è un "layout orizzontale", quindi è destinato ad andare fuori al lato, invece di su e giù - simile a un gioco a scorrimento laterale. Data la loro progettazione, layout orizzontali richiedono un attributo di altezza, come documentato qui: http://isotope.metafizzy.co/layout-modes.html#horizontal-layouts

Statico Soluzione

voglio riempire la larghezza del contenitore con tuttavia molte colonne in forma, e lo voglio occupare tutto lo spazio verticale necessario.

Si desidera utilizzare masonry anziché fitColumns. L'impostazione di columnWidth consente di riempire la larghezza del contenitore e di utilizzare lo spazio verticale necessario. Per esempio: http://jsfiddle.net/cUcFd/22/

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

dinamica Soluzione

Dando per scontato che non si conosce la larghezza delle colonne e vuoi trovare in modo dinamico, è possibile basare fuori l'elemento più ampia #container usando qualcosa come il codice fornito qui: https://stackoverflow.com/a/8853777/1786459

Ad esempio: http://jsfiddle.net/cUcFd/24/

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

Tuttavia, spetterà a voi determinare il metodo più appropriato per impostare la larghezza della colonna.

Answer 2

Prova a impostare una larghezza e un'altezza per il tuo contenitore. Quando si utilizza layoutMode:'fitColumns', deve fornire a tutti gli elementi una proprietà float che non riempie più il contenitore.

Si consiglia inoltre di impostare resizesContainer:false