Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Układanie elementów na siatce
Forum PHP.pl > Forum > Po stronie przeglądarki
lustfingers
Witam, mam dodatek którym ładuje zdjęcia, są one układane na siatce, to dział ładnie do momentu jak wrzucę zdjęcie które w wysokości zajmuje więcej niż jedno pole wtedy pozostaje pusta przestrzeń którą chciałbym wypełnić kolejnym elementem.

Poniżej grafika która to zobrazuje, każdy element ma długość 25% strony czyli jedno pole siatki i float:left. Białe pola są puste i chciałbym je wypełnić, ktoś może mi podpowiedzieć jak to zrobić?

koodo218
http://miromannino.github.io/Justified-Gallery/
lustfingers
Dzięki za chwile będę to testował i dam znać.

Edycja:

Pobrałem repozytorium ale wygląda na to że nie jest kompletne, nie mogę tego odpalić.
Comandeer
A jQuery dołączyłeś?
lustfingers
No właśnie w tym chyba jest największy problem ponieważ robię to na prestashop, jest już sporo bibliotek załadowanych i dodając jquery sypie mi w konsoli błędami. Najlepiej jakbym wiedział które funkcje z plików są za to odpowiedzialne wtedy było by mi może łatwiej poskładać to w sensowną całość bez zbędnych funkcji. Druga sprawa jest taka że mam układ html zupełnie inny niż w przykładzie i to też za pewne wymaga zmiany w js.


EDYCJA:

Utworzyłem jsfiddle który obrazuje uproszczony przykład. Teraz chcę wykonać taką modyfikacje która pozwoli wypełnić pustą przestrzeń poniżej diva 1 np. divem 5, dziurę po 5 wypełnić divem 6 i kolejno divem 9.

https://jsfiddle.net/dLnwfr56/

Czy podanym przykładem jestem to w stanie zrobić?

Podbijam temat.
trueblue
Szukaj pod hasłem: css masonry.
https://medium.com/@_jh3y/how-to-pure-css-m...a31a#.78ruwjyio
lustfingers
Dzięki, trafiłem już na mnóstwo bezużytecznych rzeczy w sieci, już miałem sobie dać spokój po n-tym masonry który opierał się na kolumnach ale znalazłem coś co może mi sie jednak przydać. W końcu trafiłem na przykład który nie wymaga określonej ilości kolumn i określonej wysokości. Przetestuje i dam znać.

Edycja:

Próbowałem tego przykładu:
http://masonry.desandro.com/layout.html
http://codepen.io/desandro/pen/JFpeg

i co prawda 5 przeskakuje na chcianą pozycję natomiast 9 pozostaje na swoim miejscu, gdy w kodzie 9 przesunę w górę wtedy wypełnia mi ona lukę więc skrypt dział tak że tylko ustawia kontenery według ich kolejności w kodzie... a miało być tak pięknie, szukam dalej.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.