Jak dynamicznie utworzyć kolaż (siatkę bez przerw) obrazów, w których obrazy mają różną wysokość?

Chcę wyświetlić stronę miniatur. Miniatury to obrazy graficzne przesłane przez użytkownika. Każdy obraz ma ograniczoną szerokość, ale nie ma ograniczonej wysokości, ponieważ pokazuje pełny obraz bez przycinania.Jak dynamicznie utworzyć kolaż (siatkę bez przerw) obrazów, w których obrazy mają różną wysokość?

Chcę, aby obrazy były do siebie dopasowane bez przerw między nimi. Liczba kolumn nie jest ustalona: jeśli rozszerzam lub zmieniam rozmiar strony, obrazy powinny przepływać do prawidłowej liczby kolumn.

float:left

jest PRAWIE, czego chcę. Wyjątkiem sytuacji, gdy istnieje wysokie zdjęć na stronie otrzymuję ten gapped wygląd:

enter image description here

Jak mogę wyeliminować luki?

Źródło

2011-06-30 Homan

Można zdefiniować 4 odrębne tabele (każda z jednej kolumny) w wierszu :) –

Aby uzyskać wygląd, który chcesz, będziesz musiał użyć pozycjonowanie bezwzględne. Możesz napisać własny skrypt lub użyć wtyczki takiej, jak ta sugerowana. – jchavannes

Jeśli chcesz to zrobić tylko w css, musisz utworzyć divy dla każdej kolumny i uaktywnić te kolumny (ale spowoduje to zanikanie kolejności obrazów).

Alternatywnie można użyć wtyczki jquery, takiej jak this one.

Źródło

2011-06-30 21:18:06 Litek

dzięki. dodatek do muru robi to, co chcę. Poza tym wolałbym, aby pierwotny porządek był przesuwany od lewej do prawej w każdym rzędzie. Masoneria robi to w pierwszym rzędzie, ale w drugim rzędzie wydaje się dowolnie dopasowywać następny obraz, aby uzyskać największą lukę, jaką może znaleźć. Choć ogólnie rzecz biorąc, wydajesz się, że pierwsza kolejność jest "bliska" górze, ale niekoniecznie od lewej do prawej. – Homan

Możliwość uniknięcia zepsucia obrazów ma licznik, na co czwarty obraz umieszczasz w danym dziale. Więc masz ten licznik i twierdzenie o długości, idąc 1,2,3 i 4 ... kiedy liczba trafień 1, dodajesz do div 1, i tak dalej, a kiedy trafi 4, po prostu dodajesz liczbę z powrotem do 0 :) Problem rozwiązany! –

Nie jestem pewien, jak wdzięku potrzebujesz swojego CSS, ale mimo wszystko jest to dobra opcja. Możesz użyć masonry.js do pomocy.

http://css-tricks.com/seamless-responsive-photo-grid/

Źródło

2012-02-25 13:20:48 onefastsnail

To powinna być wybrana odpowiedź! – vsync

Wiem, że odpowiedziała ci to jakiś czas temu, ale czy kiedykolwiek wymyśliłeś sposób wyświetlania obrazów od lewej do prawej zamiast od góry do dołu? – SISYN

Jak dynamicznie utworzyć kolaż (siatkę bez przerw) obrazów, w których obrazy mają różną wysokość?

Odpowiedz

Powiązane problemy