Isotop fitColumns Layout bewirkt, dass der Behälter leer

Siehe http://jsfiddle.net/cUcFd/5/ gehen - beachten Sie, dass, wenn Sie den Layoutmodus zu ‚Mauerwerk‘ oder ‚fitRows‘ ändern funktioniert es gut. Aber mit 'fitColumns' ist es einfach leer und alle Blöcke verschwinden.Isotop fitColumns Layout bewirkt, dass der Behälter leer

Es scheint Anforderungen in Bezug auf welche Arten gehalten werden, sind auf dem Behälter und Gegenstände, um fitColumns Modus zu arbeiten, aber ich kann keine Dokumentation finden, was sie sind.

Quelle

2012-06-20 enn

OP, haben Sie schon Lösungen gefunden? –

Warum es nicht funktioniert

fitColumns ist ein „horizontales Layout“ einstellen möchten, so ist es beabsichtigt, zur Seite zu gehen, anstatt nach oben und unten - ähnlich wie ein Side-Scroller-Spiel. Aufgrund ihrer Konstruktion erfordern horizontale Layouts eine Höhe Attribut, wie hier dokumentiert: http://isotope.metafizzy.co/layout-modes.html#horizontal-layouts

Statische Lösung

ich die Breite des Behälters mit jedoch viele Spalten passen füllen wollen, und ich will es so viel vertikalen Raum einnehmen wie nötig.

Sie möchten masonry anstelle von fitColumns verwenden. Wenn Sie columnWidth einstellen, können Sie die Breite des Containers ausfüllen und so viel vertikalen Platz wie nötig nutzen. Zum Beispiel: http://jsfiddle.net/cUcFd/22/

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

Dynamic Solution

Vorausgesetzt, dass Sie nicht über die Breite der Spalten kennen und sie wollen dynamisch finden, können Sie es stützen das breiteste Element in #container mit so etwas wie weg der Code hier zu finden: https://stackoverflow.com/a/8853777/1786459

Zum Beispiel: http://jsfiddle.net/cUcFd/24/

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

Es liegt jedoch an Ihnen, die am besten geeignete Methode zum Einstellen der Spaltenbreite zu bestimmen.

Quelle

2014-02-03 16:14:20

Was ist, wenn Sie die vertikale Reihenfolge von "Fitcolumns" beibehalten möchten, aber das Layout von "feste Breite, aber nicht feste Höhe" Layout-Stil von Mauerwerk haben. Oder anders gesagt, das gleiche Layout wie das Mauerwerk, aber die Reihenfolge der Elemente verläuft von oben nach unten und nicht von links nach rechts. –

Hi @PaulRedmond, hast du einen Weg gefunden, das zu tun? Ich suchte nach genau der gleichen Lösung für mein Problem: FitColumn sortiert meine Artikel wie ich will (von oben nach unten dann von links nach rechts), aber ich kenne die Containerhöhe (nur die Breite) nicht. – frenetix

@frenetix Ich habe leider keine Lösung gefunden und bin am Ende mit einem Mauerwerk gegangen. –

Versuchen Sie, eine Breite und Höhe auf Ihren Container zu setzen. Wenn Sie layoutMode:'fitColumns' verwenden, muss es allen Elementen eine Float-Eigenschaft geben, die den Container nicht mehr füllt.

Sie auch resizesContainer:false

Quelle

2012-06-20 20:47:55 JJFizzle

Ich habe bereits eine Breite eingestellt, wie Sie sehen können. Das Festlegen einer Höhe würde den Zweck dessen, was ich versuche, zunichte machen - ich möchte die Breite des Containers mit so vielen Spalten füllen, wie ich möchte, und ich möchte, dass er so viel vertikalen Platz einnimmt, wie er benötigt. – enn

Isotop fitColumns Layout bewirkt, dass der Behälter leer

Antwort

Verwandte Themen