jak replikować pinterest.com ' s absolute div układ układania [zamknięty]
chcesz poprawić to pytanie? Update the question so it edytując ten post.
Zamknięte 7 lat temu .
Popraw to pytanieSzukam replikacji Pinterest.com układ div, w szczególności jak liczba kolumn dostosowuje się, aby pasowały bardziej / mniej przy zmianie rozmiaru przeglądarki, a pionowe układanie nie zależy od sąsiednie wysokości kolumn. Kod źródłowy pokazuje, że każdy div jest absolutną pozycją. Współzałożyciel odpowiedział Quora post stwierdzając, że jest to zrobione z niestandardowych jQuery i CSS. Chciałbym, aby wyniki posortowane od lewej do prawej. Każdy kierunek, który mógłbyś zapewnić, aby zrobić to sam, byłby bardzo mile widziany.
7 answers
Możesz również sprawdzić wtyczkę jQuery Masonry, dla tego rodzaju funkcjonalności.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-29 22:07:16
Napisałem skrypt Pinteresta. Identyfikatory nie są powiązane z układem i są używane do innych JS związanych z interakcją. Oto podstawa tego, jak to działa:
:
- absolutnie Ustaw pojemniki na szpilki
- określ szerokość kolumny
- wyznaczanie marginesu między kolumnami (rynna)
Konfiguracja tablicy:
- uzyskaj szerokość kontenera nadrzędnego; Oblicz # kolumn, które będą pasowały
- tworzy pustą tablicę, z długość równa # kolumn. Użyj tej tablicy, aby zapisać wysokość każdej kolumny podczas budowania układu, np. wysokość kolumny 1 jest przechowywana jako tablica [0]
Pętla przez każdy pin:
- umieść każdy pin w najkrótszej kolumnie w momencie dodania
- "left:" = = = kolumna # (tablica indeksów) razy szerokość kolumny + margines
- "top:" = = = wartość w tablicy (wysokość) dla najkrótszej kolumny w tym czasie
- na koniec dodaj wysokość szpilki do wysokość kolumny (wartość tablicy)
Wynik jest lekki. W Chrome układanie pełnej strony 50 + pinów zajmuje
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-20 01:13:27
Wydaliśmy wtyczkę jQuery, ponieważ kilka razy otrzymaliśmy to samo pytanie do Wookmark . Tworzy dokładnie tego typu układ. Zobacz go tutaj- Wookmark jQuery plugin
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-17 12:53:32
Po przyjrzeniu się wszystkim opcjom wdrożyłem układ podobny do Pinteresta w ten sposób:
Wszystkie divy to:
div.tile {
display: inline-block;
vertical-align: top;
}
To sprawia, że ich pozycja w rzędach jest lepsza niż w przypadku, gdy są unoszone.
Następnie, gdy strona jest ładowana, iteruję wszystkie Div w JavaScript, aby usunąć luki między nimi. Działa poprawnie gdy:
- Div nie różnią się zbytnio wysokością.
- nie masz nic przeciwko drobnym naruszeniom porządku (niektóre elementy, które były poniżej można podciągnąć powyżej).
- nie przeszkadza ci, że dolna linia jest różnej wysokości.
Zaletą tego podejścia-Twój HTML ma sens dla wyszukiwarek, może pracować z JavaScript wyłączonym / zablokowanym przez firewall, Sekwencja elementów w HTML pasuje do sekwencji logicznej (nowsze elementy przed starszymi)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-17 02:52:13
Dzielą encje na kolumny z ids (złe rozwiązanie... lepiej używać nazw klas), a następnie obliczać pozycje według grup kolumn
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-18 14:56:09
Dlaczego nie spróbujesz tego, prostego js stuff
Http://vanilla-masonry.desandro.com/index.html
Lub nawet to z jQuery i z załadowaniem przewijania.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-24 12:51:54
Możesz użyć pływaków i rozmiar szerokości div za pomocą procentów wraz z min-szerokość wymusić div automatycznie spadek po minimalnej szerokości jest osiągnięty? Its the way we got it working on http://www.goldtree.co.za/work
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-20 13:50:01