Układanie elementów na siatce Opcje

[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ć?

(IMG:http://i.imgur.com/Qm79iqd.jpg)

[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ć.

Ten post edytował lustfingers 26.06.2016, 12:35:51

[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.

Ten post edytował lustfingers 27.06.2016, 18:43:42

[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.