Änderung der Anordnung animieren (jquery)

[keine-ahnung-haber]

Servus,
ich komme einfach nicht auf die Lösung für Folgendes: Ich habe eine Reihe von <li>'s. Wenn das Browserfenster Breit genug ist, passen 3 in eine Zeile, macht man das Fenster schmaler sind nurnoch 2 in einer Zeile aber dementsprechend mehr Zeilen. Genau diesen Schritt, also das neu Anordnen bei kleiner werdendem Browserfenster möchte ich animieren. Zur Verfügung stehen css, jquery und natürlich Javascript allgemein.
Ich habe vor nicht allzulanger Zeit genau dies auf einer Webseite gesehen - finde die Seite aber in meiner Chronik nicht mehr.

Hier ein Bild zum Verständniss:


das html gerüst sähe in etwa so aus:

<ul>

  <li>
    info 1
  </li>

  <li>
    info 2
  </li>


  <li>
    info 3
  </li>

[...]

</ul>

Die Anordnung per css würde dann wie folg aussehen:

ul#whatever {
  list-style:none;
  width:630px;
  margin:0 auto;
  padding:0
}

@media (min-width:950px)
{
  ul#whatever {
    width:940px;
  }
}

#whatever li {
  display:block;
  width:300px;
  height:200px;
  float:left;
  margin:5px;
}

Hat jemand eine Idee wie das umzusetzen wäre oder gar ein fertiges (jquery-)Plugin?
Vielen Dank im Vorraus!

 

[omoxen]

hi, vielleicht geht das mit css-transitions ganz einfach, schau halt mal nach.
Ansonsten würd ich halt im onresize-Event abfragen, ob deine li´s noch in die zeile passen, und das dann eben dementsprechen programmieren. Könnte vielleicht ein bisschen übertieben aufwändig werden, aber ist ja deine sache...

 

[keine-ahnung-haber]

erstmal Danke für deine Anwort!

Mit css-transition würde sich nur die Änderung der Größe des <ul> animieren lassen, nicht aber der Positionswechsel der <li>'s darin, da sich bei denen an der css-Eigenschaft ansich ja nichts ändert. Diese werden ja nur umpositioniert, weil sie in das schmaler gewordene <ul> so nicht mehr reinpassen.

Wie stellst du dir die Neu-Positionierung bei onresize-Event (also JS) vor? Nach meiner Kenntniss ginge das nur, wenn ich jedem <li> einzeln seine neue Position (mit css position:absolute :S) zuweise. Das wäre 1. wirklich recht aufwändig und müsste 2. bei sich ändernder Anzahl der <li> immer neu gemacht werden...

 

[keine-ahnung-haber]

ok.. ich habs nach wirklich laaangem suchen selbst gefunden. Isotope bietet was ich brauche. Schade, dass mir hier niemand so richtig helfen konnte.