jak replikować pinterest.com ' s absolute div układ układania [zamknięty]

zamknięte . To pytanie musi być bardziej skoncentrowane . Obecnie nie przyjmuje odpowiedzi.

chcesz poprawić to pytanie? Update the question so it edytując ten post.

Zamknięte 7 lat temu .

Popraw to pytanie

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

Author: Gilles 'SO- stop being evil', 2011-08-18
Source

7 answers

Możesz również sprawdzić wtyczkę jQuery Masonry, dla tego rodzaju funkcjonalności.

 80
Author: Bob.,
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

 183
Author: Evan Sharp,
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

 56
Author: GBKS,
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:

  1. Div nie różnią się zbytnio wysokością.
  2. nie masz nic przeciwko drobnym naruszeniom porządku (niektóre elementy, które były poniżej można podciągnąć powyżej).
  3. 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)

 2
Author: esp,
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

 0
Author: ant_Ti,
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.

Http://masonry.desandro.com/index.html

 0
Author: A Bright Worker,
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

 0
Author: I Am Goldtree,
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