Dopasowywanie obrazków - galleria

Witam.
Brakuje mi pomysłu jak dynamicznie skalować obrazki aby osiągnąć efekt takiej oto galerii:

Obrazki mogą być różnych formatów, różnych rozmiarów i zawsze muszą być wyświetlane po kolei.
Dodatkowo cała galeria musi być responsywna.
Ma ktoś jakiś pomysł? Aplikację piszę w ASP.NET MVC4.

javascript.
szukaj za "responsive gallery" w końcu znajdziesz, ja trafiłem na to: http://www.ryanepp.com/demos/balanced_gallery/horizontal

wady ma takie, że:

• nie ma preloadowania, galeria układa się dopiero po załadowaniu obrazków (zamiast preloadowania może być odbieranie z serwera wymiarów obrazków (serwer musi mieć je w bazie, ew. czytać na bieżąco i podawać z obrazkiem))
• na maksymalnej rozdzielczości na Operze coś się rozjechało - raczej wina skryptu niż Opery, bo widać, że autor gdzieś coś gubi (bo nie zawsze obrazki są wyrównane idealnie do prawej) i to samo powtórzyłoby się na ff w idealnie takim samym wymiarze okna.

więc szukaj innego.

tumblr bodajże i google images wyświetlają zdjęcia w takiej formie, może u nich coś da się podpatrzeć.

Nadaj wartości procentowe dla zaprezentowanej siatki div-ów, a do środka powrzucaj obrazki w tagu img
Ukryj overflow dla div, a obrazki dopasuj do div-a

Możesz nadać każdemu "rodzajowi" wielkości własną klasę, a jeszcze lepiej pogrupować je wg linii w pewne schematy. Łatwiej nimi zarządzisz, przy różnych rozdzielczościach.

<div class="images-1-2-1">
   <div>
      <img titile="obrazek1" alt="obrazek1" src="./obrazek1">
   </div>
   <div>
      <img titile="obrazekduzy" alt="obrazekduzy" src="./obrazekduzy">
   </div>
   <div>
      <img titile="obrazek3" alt="obrazek3" src="./obrazek3">
   </div>
</div>

@dzek69 Chciałem jak najbardziej ograniczyć JavaScript (jedynie do ładowania kolejnych partii obrazków). Jak podglądałem Tumblr'a, Google Images, i Eyeem to jedyna komunikacja z serverem polega na wysłaniu żądania o kolejne wiersze.
~edit
Chodzi mi o skalowanie obrazków po stronie serwera (bo przesyłanie wielkich obrazków i skalowanie ich po stronie przeglądarki raczej zdecydowanie nie będzie wydajne). Mam gotowy algorytm do skalowania galerii na telefonach ale nie wiem jak to przenieść na stronę i w dodatku responsywną.

@pitu7dg Tylko problem jest tego typu, że obrazki mogą być w skrajnie różnych formatach (480x800, 950x2000 itd.) i nieokreśloną ilość 'rodzajów' wielkości. Jeśli oddam skalowanie %-om to mam pewność, że na brzegach nie będzie pustych miejsc? Bo wydaje mi się, że tak właśnie się stanie.

@Sharbat: Takiej galerii nie stworzysz idealnej bez kadrowania (wszystkie tego typu galerie kadrują obrazy). Kadrowanie przez css i overflow (czy tam background-size). tak samo jak nie zrobisz responsywnej galerii bez przeskalowywania obrazków po stronie przeglądarki (wiadomo, że możesz je pomniejszyć i potem skalować, zamiast skalować obrazy 4k) - możesz to ograniczyć, ale raczej nie wyeliminować ;)

Jeżeli tak czy siak korzystasz z javascriptu - to nie ograniczaj się szczególnie, jeżeli nie masz szczególnych powodów. To przeglądarka jest od renderowania - więc nie zrzucaj renderowania na serwer. Szczególnie responsywne strony.

Okej, czyli rozumiem, że muszę:

1. Ustawić rozmiar głównego DIV'a galerii na rozmiar %-owy.
2. Pobrać aktualny rozmiar tego DIV'a przez JS'a.
3. Określić maksymalną wysokość jednego wiersza.
4. Składać jeden wiersz dodając kolejne obrazki i skalować je do zadanej wysokości.
5. Jeśli dodany (ostatni w wierszu) obrazek wychodzi poza długość wiersza to skaluje wszystkie obrazki proporcjonalnie żeby wypełniły cały wiersz (skalowanie w dół jeśli chciałbym dokoptować ten ostatni obrazek do aktualnego wiersza lub w górę jeśli ostatni obrazek ma znaleźć się w wierszu kolejnym).

A jak rozwiązać to, żeby nie ładowały mi się najpierw w jednej linii? Ukryć całość (display: none), załadować, przeskalować i odkryć (display: block)? Czy jest jakiś optymalniejszy sposób?
~edit
Mogę ewentualnie ładować całą listę SRC'ków i ich rozmiary do tablicy w JS'ie i przeskalowane dodawać (append) do treści strony (?)

Mam jeszcze jedno pytanie z ładowaniem galerii.
Po 1. jak wykryć kiedy scroll dojeżdża do końca ekranu.
Po 2. jak dodawać nowe elementu które zwróci mi Ajax.
Główne wątpliwości mam z powodu Ajax'a i ASP.NET'a ponieważ obrazki są wyświetlane za pomocą kontrolera w taki sposób:

<img src="/App/Images/ShowSingleImage/193" class="single_image" real-height="1023" real-width="828" id="single-img_193" style="width: 202.261px; height: 249.895px;">

Pierwszy człon linka ("/App") to 'Virtual Directory' stworzone przez Visual Studio żeby można było łączyć się z projektem po sieci wewnętrznej i nie będzie tego na serwerze produkcyjnym.
Kolejno załadowane obrazki dodaje w taki sposób:

var img = document.createElement("img");
    img.setAttribute("src", "/App/Images/ShowSingleImage/"+response.data.id);
    $("#user-gallery").append(img);

Jak zmodyfikować 'src' żebym mógł pominąć "/App"?

1. jquery waypoints (raczej nie chcesz do samego końca ekranu, tylko do 2-3 elementów od końca)

Jak zmodyfikować 'src' żebym mógł pominąć "/App"?

po prostu zapisz sobie gdzieś zmienną, zawierającą "ścieżkę do korzenia", a potem doklejaj ją na początku.