Ich bin daran interessiert zu sehen, wie Sie eine WordPress-Abfrage ausführen können, um ein Layout wie dieses zu erreichen, wenn Sie Beiträge abrufen:
http://planetpropaganda.com/#!/blog
Wie Sie sehen können, haben die Boxen unterschiedliche Höhen (meistens wegen unterschiedlicher Auszugslängen).
Was sie gemacht haben, sieht toll aus, aber da die Boxen absolut positioniert sind, glaube ich nicht, dass es gut mit einem responsiven Layout funktioniert.
Hat jemand eine Ahnung?
Dieses Layout nennt sich Dynamic Grid Layout, das (vielleicht) zuerst von Pinterest implementiert wurde. Die Leute nennen id immer “Pinterest-like Grid Layout”. Ich habe einen Link, der eine nette Einführung in “Pinterest-like Grid Layout” gibt, was Ihnen helfen kann, es zu verstehen.
Und Einführung in das Pinterest-ähnliche dynamische Rasterlayout
und wenn Sie jQuery verwenden, können Sie sich eine Liste ansehen, die dieser Link enthält. Dort sind 5 jQuery-Plugins aufgelistet.
5 jQuery-Plug-ins zum Erstellen von Pinterest-ähnlichen dynamischen Grid-Layouts
Wenn Sie weitere Ressourcen zum Erstellen dieses Layouts erhalten möchten, fangen Sie an, „Pinterest-like Grid Layout“ zu googeln, Sie werden Ihren Weg finden.
Richtig, damit dieses Layout responsiv ist, müssen Sie JS verwenden, um sie neu zu positionieren. Ähnlich wie bei Pinterest sind diese “Kacheln” nur Geschwister.
Sie können jedoch eine verwenden mehrspaltiger Ansatz. Das Problem dabei ist, dass Sie einen Algorithmus benötigen, um die Spalten gleichmäßig zwischen den Spalten zu verteilen. Pinterest kommt damit durch, indem es absolut positionierte Elemente verwendet.
Für diesen müssen Sie dies entweder auf der Serverseite tun (aber Sie wissen nicht, wie lang der Inhalt ist, sodass Sie möglicherweise unausgeglichene Spalten erhalten) oder einige verrückte DOM-Manipulationen durchführen (Sie kennen die Dimensionen, tun aber Dinge in DOM ist langsam)
<ul>
<li class="a3">content</li>
<li class="a3">content</li>
<li class="a2">content</li>
<li class="a1">content</li>
<li class="a3">content</li>
</ul>
<ul>
<li class="a1">content</li>
<li class="a2">content</li>
<li class="a1">content</li>
<li class="a3">content</li>
<li class="a2">content</li>
</ul>
ul{
float:left;
width:250px;
}
li{
background:#ccc;
margin: 0 20px 20px 0;
}
/*let's simulate varying content height*/
.a1{
height:150px;
}
.a2{
height:300px;
}
.a3{
height:450px;
}
Pinterest-Boxen sind auch absolut positioniert und funktionieren hervorragend für sie. Sie erhalten jeden Tag eine enorme Anzahl von Besuchen.
Wahrscheinlich die beliebteste Bibliothek dafür. Außerdem MIT-Lizenz, daher kann es ohne Einschränkungen kostenlos verwendet werden. Die Dokumentation dafür ist viel besser als alle Alternativen, die ich gesehen habe.
