Dynamiczne sortowanie i przycinanie obrazów podobne do widoku Google + album

Question

Czy ktoś może mi pomóc w znalezieniu rozwiązania, które pozwoli uzyskać taki sam wynik, jak google plus album view?

Lista miniatur zarządza w celu zachowania stałej szerokości wiersza poprzez ponowne sortowanie I przycinanie obrazów tak, aby zmieściły się cały czas i zmieniają je zgodnie z rozmiarem okna.

wiem o masonry ale ma tendencję do tworzenia dużo białej przestrzeni, gdy zdjęcia nie mają ten sam rozmiar ... (ponieważ nie obsługuje przycinania)

Czy ktoś wie o plugin, dokłada że? a jeśli nie podstawowa matematyka za tym?

Answer 1

Co znalazłem w Google Plus i może to pomóc.

1. Wycinają niektóre obrazy, aby dopasować. Ci easely Można go znaleźć na pierwszym obrazie
2. Mają linii obrazów z tej samej wysokości

Tak jest łatwość, aby to zrobić. Możesz dopasować obrazy do tej samej wysokości, najpierw skalując, a w każdej linii możesz wyciąć najszerszy fragment, aby dostosować szerokość linii.

O, przy okazji, jeśli będzie strach chrom okno z Google + Service to nie będzie wyglądać tak dobrze, jak to było, pewne luki będą wyświetlane, dla niektórych liniach

Answer 2

może to jest przesada trochę za kim jesteś szukam.

Możesz użyć algorytmu Simulated Annealing, który jest powszechnie używany w elektronice, aby znaleźć optymalny układ dla wszystkich drobnych elementów elektronicznych wewnątrz ograniczonego obszaru mikroczipa, co jest w zasadzie tym samym problemem ze znalezieniem najlepszego układu dla zestawu obrazów w oknie przeglądarki.

Zasadniczo ten algorytm daje dobre rozwiązanie, ale nie gwarantuje, że będzie najlepszy. Przeczytaj uważnie artykuł z Wikipedii, ponieważ wyjaśnia on lepiej niż ja bym zrobił.

Możesz również sprawdzić ten Simulated Annealing applet dla problemu sprzedawcy. Wypróbuj w 500 temperaturach i obserwuj, co się dzieje, gdy przeziębienie.

Mam nadzieję, że to pomoże.

Answer 3

przyjrzeć:

http://blog.vjeux.com/2012/javascript/image-layout-algorithm-google-plus.html

To wyjaśnia, jak działa układ.

wziąć również do obejrzenia: http://www.techbits.de/2011/10/25/building-a-google-plus-inspired-image-gallery/ http://www.moewashere.com/jglance/

które są obie implementacje Google Plus albumu siatki.