Fließende DIV Container (Flexbox/Javascript)

[TTlong]

Hallo,

ich benötige eure Hilfe bei folgendem Problem. Es soll eine Seite mit Bildern werden, welche in DIV Containern mit fester Breite aber unterschiedlicher Höhe dargestellt werden.
Mit CSS Flexbox bekomme ich es wie im Anhang hin, jedoch sollen die DIVs so wie beispielsweise Instagram angeordnet werden. Also fließend egal welcher Höhe. In meinem Versuch funktioniert es leider nur so, dass die Container in den weiteren Zeilen einen zu großen Abstand zur vorherigen Zeile haben.


http://i.imgur.com/M0uUyAS.jpg


Das rot umrandete ist das gewollte Ergebnis. Bietet CSS Flexbox eine solche Methode oder Javascript? Ich habe bisher nichts finden können.


Mein CSS dazu:
CODE
#container {
width:1000px;
margin: auto;
background:#fff;
display:-webkit-flex;
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
align-items:flex-start;
}

#container > div {
width: 200px;
height: auto;
min-height: 100px;
margin: 10px;
border: 1px solid #CCC;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;

}

#container > div img {
border: none;
}




Danke für eure Hilfe.



PS: Die Anhang-Funktion funktioniert nicht ;-)

 

[rem]

Das hat mich gerade interessiert. Was Du beschreibst ist das normale Verhalten, wenn man style="float:left" durchgehend nutzen würde.

Was Du haben willst wäre etwas wie "divs as in facebook timeline"...
http://stackoverflow.com/questions/9141502...cebook-timeline
Mit Hilfe von <li> hmmm...

In der zweiten Antwort
http://stackoverflow.com/questions/8191015...cebook-timeline
QUOTE you have to have the containers on the left be floated and cleared left and the ones on the right be floated and cleared right. You can do this either with javascript or whatever your server side language you use.


Eine Frage ist ja auch: ob das strikt z.B. nach Datum geordnet werden müsste. Sonst würde ich wohl auch noch CSS Columns ausprobieren.

Und ja: Wenn das nach Datum sortiert erscheinen müsste, so müsste man für den zweiten Vorschlag wohl oder übel die Höhen der divs mit JS ermitteln und aufaddieren. Die "einfache Lösung" ist da zu wenig genau:

CODE <div style="float: left; clear:left; width: 50%; height: 110px; border-style: solid; border-width: 1px;">
<p>1</p>
</div>
<div style="float: right; clear:right; width: 50%; height: 60px; border-style: solid; border-width: 1px;">
<p>2</p>
</div>
<div style="float: left; clear:left; width: 50%; height: 400px; border-style: solid; border-width: 1px;">
<p>3</p>
</div>
<div style="float: right; clear:right; width: 50%; height: 400px; border-style: solid; border-width: 1px;">
<p>4</p>
</div>
<div style="float: left; clear:left; width: 50%; height: 10px; border-style: solid; border-width: 1px;">
<p>5</p>
</div>
<div style="float: right; clear:right; width: 50%; height: 50px; border-style: solid; border-width: 1px;">
<p>6</p>
</div>



Man müsste insofern für Kolonne 1 und 2 die Höhen aufaddieren und entscheiden ob ein bestimmtes Element links oder rechts zu addieren ist.
http://stackoverflow.com/questions/1561555...lain-javascript
Dazu müsste man halt die divs durchgehend mit IDs versehen und dann die CSS-Eigenschaften mit JS auslesen und manipulieren.

Ich denke, das sollte programmierbar sein.
Man könnte im Prinzip die eher dumme, abwechselnde Lösung für Leute nutzen, die kein JS laufen haben (oder das reine float-Modell) und dann mittels JS umbiegen.
Da ist was angefangen. Man muss halt die Höhe noch bestimmen:
http://jsfiddle.net/gK2Vn/

Bliebe die Antwort mit den Li-Elementen...