jQuery Mauerwerk: Automatische Größenänderung von Fotos, wie Beyonce ' s website
jQuery Mauerwerk website enthält Beyonce-website showcase:
Aber es nicht zeigen, wie Sie erreicht Ihren auto-Größenänderung-Effekt. Ich lief Ihr code durch eine prettifier, aber es sieht immer noch sehr chaotisch:
function resize() {
1024 < $(window).width() ? 0 == headerNavOpen && $("#header").css({left:-$(window).width()}) : 0 == headerNavOpen && $("#header").css({left:-1024});
$(".index .post.video").css({width:"33.2%", height:0.332 * $("#container").width() / 1.778})
}
Weiß jemand einen einfacheren Weg, um die gleiche Wirkung?
Hier eine Geige mit einem basic setup: http://jsfiddle.net/CfsEb/
- Warum sind Sie zu zerreißen minified code von dieser Seite? Die offizielle Website hat eine gute Dokumentation, wie Sie den Rahmen, warum nicht finden?
- Mauerwerk der Dokumentation scheint nicht zu decken, diese Art der Sache.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sehen http://metafizzy.co/blog/beyonce-seamless-fluid-image-masonry/
Was Sie tun, ist eigentlich ziemlich einfach, Sie sind mit dem bestehenden Rahmen für die Positionierung und wenn der Bildschirm kleiner als 1024, dann Sie tauschen einige CSS zu Steuern Breite mit einem Prozentsatz. So sah der code gepostet...
Also den oben genannten code, der zwei Dinge tut, stellt der nav und stellt die einzelnen "Beiträge". Dies ist völlig unabhängig von der DOM-manipulation, die die jQuery-Durchführung–stellen Sie sich dies einfach als piggy-backing drauf. Nur verhält sich dieser Weg jedoch für kleinere Bildschirme. Also, wenn Sie wollten diese immer Verhalten auf diese Weise können Sie einfach eine Klasse hinzufügen, um Ihre dom-Elemente mit einem %, die erreicht, was Sie nach. Sonst könnten Sie tun, ein Fenster zu überprüfen, wie die oben genannten code, nur das weglassen der Teile, die Sie nicht brauchen.