Pytanie Ułóż elementy Div ułożone obok innych - Pinterest lub Pose


Chciałbym zaimplementować styl używany lub stosowany w przypadku obrazów / div rozmieszczonych obok innych w witrynach takich jak Pinterest lub Poza bez względu na to, jaka jest ich indywidualna rozdzielczość. Próbowałem tak układać div obok siebie

<div id="mainContainer">
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="differentHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
</div>

Css:

#mainContainer { width:800px; }
.sameHeightDiv{ float: left; width: 100px; height:190px; } 
.differentHeightDiv { float: left; width: 100px; height:225px; }

Który jest ustawiony jak

1 2 3 4
      5
6 7 8

Ponieważ wysokość 3'Div (. Dififight HeDiv) jest większa, wiem, że rzeczy będą działać, jeśli wszystkie wysokości są równe, ale chcę rozwiązania, jeśli jest nierówne (tzn. Jeśli każdy div ma różne rozdzielczości / proporcje) Ktoś mi pomoże to.

Dzięki.


10
2018-02-09 06:51


pochodzenie


Sprawdzić Kamieniarstwo lub izotoprobią to, co próbujesz zrobić. - Christian Varga
@ChristianVarga Fantastyczny! Dzięki za szybką pomoc. Wygląda na to, że JQuery Mansory jest wykorzystywany przez Pinterest i Pose. Czy funkcja animacji jest również dostępna z prawdą? - Wesley
Pinterest spowodował, że jQuery Masonry zyskało nowy wymiar. Robi dokładnie to, czego szukasz. masonry.desandro.com - Shaun Russell
tutaj jest moja wtyczka jquery, napisałem, aby zbudować ten sam układ co Pinterest. kayschneider.github.com/pinbox - Kay Schneider


Odpowiedzi:


Oto ładny samouczek na temat zasadniczych osiągnięć układu http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/


6
2018-05-21 12:27



Łał! samouczek jest najlepszy, zamiast ślepo stosować framework JQuery. Wielkie dzięki @superlogical - Wesley
Tak, dobrze jest wiedzieć, jak to działa. Ale sugerowałbym użycie jQuery Masonry lub jQuery Isotope, ponieważ mają one funkcjonalność, która będzie potrzebna, jak dynamiczne dodawanie / usuwanie elementów z listy i dostarczanie kolejności sortowania. - superlogical
czy istnieje jakikolwiek samouczek dotyczący wyskakującego okna "Repin"? - rynhe


Airbnb ma właśnie otwarte źródła infinity.js 

Infinity.js to UITableView dla sieci: przyspiesza przewijanie   dzięki długiej liście i zapewnia nieprzerwane i stabilne źródło danych   twoi użytkownicy.

ListView to kontener, który przenosi zawartość zi do DOM   zdarzenie przewijania. ListViews pomaga odmienić czas kosztownych stron   (i przewijanie płynne), upewniając się, że nigdy nie jest   wiele elementów na ekranie za jednym razem. ListViews przoduje w przyspieszeniu   do długich list złożonych elementów HTML, gdzie jest nowa treść   często dołączane do końca, a istniejące treści rzadko są usuwane.

Zobacz prezentację tutaj


1
2017-08-21 21:53



Ale czy ten ekran jest responsywny? nie, przynajmniej z częścią demo, chyba? - Wesley