Izotopy jquery: Jak wypełnić puste miejsca?

Question

Próbowałem praktycznie każdej podpowiedzi/wskazówki/porady, aby to osiągnąć, ale nadal mam te puste, brzydkie przestrzenie, gdy używam Isotopy.

Oto jedna z następujących czynności: demo showing the problem.

Widzisz te puste miejsca? Czy jest jakiś kod jquery, który sprawiłby, że dolne elementy wypełniałyby te puste miejsca, gdy są jakieś?

JEŻELI używamy jednej szerokości dla wszystkich elementów, problem w ogóle się nie pojawia. Zaczyna się pojawiać, gdy używasz różnych szerokości dla każdego przedmiotu. Izotop nie jest wystarczająco inteligentny, aby szukać pustych luk i wypełniać je, jeśli dostępny jest jakiś odpowiedni rozmiar.

Każda pomoc? Naprawdę utknąłem!

pytanie uzupełniające, które mogą pomóc rozwiązać ten problem:

Czy istnieje jakiś plugin jQuery, która zmusza elementy unosić? Wierzę, że może to zmusić przedmioty do wypełnienia pustych miejsc!

Answer 1

Zgodnie z ostatnią zmianą istnieje teraz packery layout mode for isotope. Oryginalna odpowiedź i późniejsze uzupełnienia pozostają poniżej.

---

Ta cecha została poproszona przez innych, a także:

• https://github.com/desandro/masonry/issues/141
• https://github.com/desandro/isotope/issues/125
• https://github.com/desandro/isotope/issues/197
• https://github.com/desandro/isotope/issues/198
• https://github.com/desandro/isotope/issues/219
• https://github.com/desandro/vanilla-masonry/issues/6
• How to avoid gaps using Isotope with Masonry layout

W skrócie, obecny odpowiedź wydaje się, że jeśli chcesz, aby uniknąć przerw w ogóle należy:

1. Wybierz stałą szerokość
2. Ostrożnie rozmieścić elementy z w odniesieniu do ich rozmiarów, więc nie ma żadnych przerw na wybrane szerokości.

Oczywiście, jeśli twoje przedmioty nie są statyczne pod względem rozmiaru i położenia, lub jeśli nie możesz ustawić szerokości, nie mogę sobie wyobrazić, że działałoby to zbyt dobrze.

Jeśli ręczne układanie elementów w celu wypełnienia szczelin dla kontenera o stałej szerokości nie będzie dla ciebie odpowiednie, polecam dzwonienie z +1 przy pierwszym łączu.

---

E (4.22.2013): Zauważyłem ostatnią aktywność, więc szybką aktualizację. To wszystko jest dostępne w numerze muru # 141, pierwszy link:

PerfectMasonry to rozszerzenie układu dla izotopu. Wypełnia luki, zapewniając "perfectMasonry" layoutMode i opcje, które zapewnia układ bez luk.

Nested to alternatywna biblioteka dla układów wolnych od luk.

Packery to biblioteka stworzona przez twórcę izotopu, która obsługuje układy wolne od luk i nie tylko.

Nie korzystałem osobiście z żadnego z nich (jeszcze).

Na końcu, na his blog post about Packery's release, DeSandro stwierdza: "W końcu chciałbym poruszyć ten i inne rozwiązania opracowane w Packery do masonerii i izotopu."

Nie liczę na to, że nastąpi to niedługo. Pakiet został wydany tylko na 7 dni od tej edycji.

E2 (13.06.2014)

DeSandro wydała packery layout mode for isotope.

Answer 2

Próbowałem wyjaśnić, dlaczego jest to in this duplicate thread, który zawiera skrzypce do grania również. Niekoniecznie jest to stała szerokość, jeśli masz wiele małych przedmiotów, takich jak na oryginalnej demonstracji, prawdopodobieństwo dopasowania jest wysokie, ale nie gwarantowane. Możesz użyć alternatywnej wtyczki, takiej jak jQuery Tiles lub spróbuj dostosować Wookmarks.

Nie jest to łatwe do zaimplementowania w twoim przypadku, zobacz what's involved i wyszukaj niektóre obrazy z nim związane, zobaczysz złożoność.