Wie sollte ich ein Bild-Portfolio erstellen?

Question

Ich liebe diese folgenden Portfolios:

http://www.ericryananderson.com/

http://jeremycowart.com/portfolio/featured/

ich eine Website mit dem gleichen Konzept einer Collage aus Fotos miteinander zu verbinden schaffen wollte. Aber ich bin mir nicht sicher, der beste Weg, um dies zu nähern, würde ich nur Box-Sizing und Floats? Oder würde Bootstrap dieses Projekt einfacher machen? Danke für Ihre Hilfe!

Edit: Ich wurde gesagt, um dies zu tun, wäre Photoshop die beste Methode, aber ich möchte dies mit nur Programmierung wenn möglich abzuschließen.

Answer 1

Ich glaube nicht, dass es möglich ist, dies mit rein CSS zu erreichen, korrigieren Sie mich, wenn ich falsch liege.

Für so etwas verwende ich normalerweise Isotop (http://isotope.metafizzy.co/), es hat eine Einstellung namens "Mauerwerk", die die Bilder absolut so positioniert. Die http://jeremycowart.com/, die Sie dort verlinkt haben, verwendet auch Isotope.

Wenn Sie strikt mit CSS gehen wollte, könnte ich nur vier Spalten setzen und dann die Bilder stapeln. Art wie dieses https://jsfiddle.net/x74rbraa/

<div class="container"> 

<div class="col"> 
    <div class="box box--portrait"> 
    </div> 
    <div class="box box--portrait"> 
    </div> 
    <div class="box box--landscape"> 
    </div> 
</div> 
<div class="col"> 
    <div class="box box--landscape"> 
    </div> 
    <div class="box box--portrait"> 
    </div> 
    <div class="box box--landscape"> 
    </div> 
</div> 

Das ist nicht sehr mobil freundlich wäre, wenn. Und Sie müssen die Sortierung/Sortierung in dem Code durchführen, der Ihre Spalten generiert. Zum Beispiel iterieren Sie alle Einträge, die Sie anzeigen möchten, speichern Sie sie in einem Array, teilen Sie das Array in mehrere kleinere Arrays auf und legen Sie deren Inhalt jeweils in eine Spalte.