як копіювати абсолютний макет укладання диванів pinterest.com [закрито]

104

Я дивлюсь, щоб повторити розкладку Pinterest.com, зокрема те, як кількість стовпців регулюється таким чином, щоб більше / менше відповідати розміру веб-переглядача, а вертикальна укладання не залежить від висоти сусідніх стовпців. Вихідний код показує, що кожен div - це абсолютна позиція. Співзасновник відповів на повідомлення Quora, заявивши, що це робиться за допомогою спеціальних jQuery та CSS. Мені б хотілося, щоб результати були відсортовані зліва направо. Будемо дуже вдячні за будь-який напрямок, який ви могли б зробити для себе.

jquery  css  layout 
— криксо
джерело
Я зашифрував свій власний за допомогою простого Jquery та CSS. Якщо ви хочете, щоб це змінилося на розмірі, просто загорніть його у функцію та спостерігайте за розміром
— Andrew WC Brown

Відповіді:

79

Ви також можете перевірити на модулі jQuery Plug-in Masonry для цього виду функціональності.

— Боб.
джерело
3
Воістину дивовижна бібліотека. Зараз я користуюся ним без проблем.
— AhmetB - Google
183

Я написав сценарій Pinterest. Ідентифікатори не пов'язані з компонуванням і використовуються для інших JS, пов'язаних з взаємодією. Ось основа, як це працює:

Заздалегідь:

  • Абсолютно розташуйте штифтові контейнери
  • Визначте ширину стовпчика
  • Визначення поля між стовпчиками (жолобом)

Налаштування масиву:

  • Отримати ширину батьківського контейнера; обчисліть кількість стовпців, які підходять
  • Створіть порожній масив, довжина якого дорівнює # стовпцям. Використовуйте цей масив для збереження висоти кожного стовпця під час створення макета, наприклад висота стовпця 1 зберігається як масив [0]

Проведіть петлю через кожну шпильку:

  • Покладіть кожну шпильку в найкоротший стовпчик в момент її додавання
  • "зліва:" === стовпець № (індексний масив) розмір ширини стовпця + поля
  • "top:" === Значення масиву (висота) для найкоротшого на той момент стовпця
  • Нарешті, додайте висоту шпильки до висоти стовпця (значення масиву)

Результат - легкий. У Chrome викладення повної сторінки з 50+ шпильок займає <10 мс.

— Еван Шарп
джерело
4
Як ви маєте на увазі обчислити висоту стовпця? Як ви знаєте, наскільки вона повинна бути високою, якщо ви не знаєте кількості та висоти предметів у ній? Будь-який шанс ви могли б продемонструвати якийсь псевдо-код для демонстрації?
— Майкл Джованні Пумо
22
ось ґрунтовний підручник - benholland.me/javascript/…
— hollandben
1
Зворотній зв'язок від користувача анонімного файлу (знайдено в черзі редагування): Цікаво, що я зробив саме той самий сценарій у jQuery, з невеликою різницею, фактично створивши таблицю з 1 рядком та N стовпцями, і просто додавши їх до найкоротшого стовпця зліва направо пріоритет. Незважаючи на те, що я також додав "Мінімальну різницю висоти" Константа, необхідного для фактичного пропуску стовпця при позиціонуванні зліва направо, це дає макеті хронологічно інтуїтивний дисплей, не втрачаючи висоти максимально рівномірно
— oers
1
@MichaelGiovanniPumo Я думаю, що висота повинна бути відома до планування (у випадку Pinterest), вони не мають "початкового" стану, у якому діви перекриваються один з одним. Це неможливо зробити, якщо висота не відома.
— ptgamr
1
Посилання @ hollandben мертве, нове посилання: benholland.me/javascript/2012/02/20/…
— Lukmo
57

Ми випустили плагін jQuery, оскільки у нас було кілька разів те саме питання щодо Wookmark . Він створює саме такий тип компонування. Перегляньте його тут - плагін Wookmark jQuery

— ГБКС
джерело
4
Це рішення, здається, завантажується швидше, ніж кладка
— Майкл Л Уотсон
що ти вважаєш кращим? вокмарк чи кладка?
— Ramje
Я вважаю за краще це над кладкою, здається швидше, як сказав Майкл.
— nerdburn
2

Переглянувши всі варіанти, я закінчив реалізувати макет, подібний Pinterest таким чином:

Усі DIV:

div.tile {
    display: inline-block;
    vertical-align: top;
}

Це робить їх позиціями в рядах краще, ніж коли вони плавають.

Потім, коли сторінка завантажується, я повторюю всі DIV в JavaScript, щоб усунути прогалини між ними. Він працює добре, коли:

  1. DIVs не дуже відрізняються за висотою.
  2. Ви не заперечуєте проти незначних порушень впорядкування (деякі елементи, які були внизу, можна витягнути вище).
  3. Ви не заперечуєте, щоб нижня лінія була різної висоти.

Перевага такого підходу - ваш HTML має сенс для пошукових систем, може працювати з відключеним / заблокованим брандмауером JavaScript, послідовність елементів у HTML відповідає логічній послідовності (новіші предмети раніше)

— особливо
джерело
Гей, чи не могли б ви сказати мені, як ви обчислювали компенсацію, яку ви мали підсумувати? А також, як ви вирішили проблему останнього елемента, що знаходиться з правого боку, бо є один елемент, який трохи більший і штовхає його туди.
— Лукас Опперман
@LukasOppermann 1) Зсув для плитки - це сума зміщення плитки в тому ж стовпці в попередньому рядку та різниця між висотою найвищої плитки в попередньому ряду та висотою плитки в тому ж стовпці у попередньому рядку. Погляньте на dev.sheeporpig.com/news (спочатку потрібно натиснути на посилання dev.sheeporpig.com/sheep/3210, щоб отримати доступ до сайту для розробки - щоб ви могли бачити нестиснені та коментовані сценарії в окремих файлах), файл сценарію stock_news.js, функціяpressTiles.
— esp
@LukasOppermann 2) Якщо ви використовуєте CSS як відповідь (особливо дисплей: вбудований блок), це не відбувається. Це трапляється лише в тому випадку, коли ви пливете: залишили свої діви. Я не використовую float.
— esp
0

Вони ділять сутності на стовпці з ідентифікаторами (неправильне рішення ... краще використовувати назви класів), а потім обчислюють позиції за групами стовпців

— ant_Ti
джерело
2
+1 Для перегляду їх вихідного коду.
— Bojangles
Для мене це було цікаво, але я думаю, що є краще рішення з меншими js розрахунками
— ant_Ti
Ви можете використовувати, display: inline-blockя думаю, але елементи різної вертикальної висоти не сидітимуть разом.
— Bojangles
1
краще використовувати контейнери для стовпців (діви з float:left;останнім і останнім overflow: hidden;) і зберігати там елементи
— ant_Ti
4
Гарна думка. Якщо ви дійсно хотіли піти по маршруту JavaScript, можете скористатися jQuery Masonry?
— Bojangles
0

Ви можете використовувати поплавці та розмір вашої ширини div, використовуючи відсотки разом із мінімальною шириною, щоб змусити знаки автоматично падати, як тільки буде досягнута мінімальна ширина? Це так, як ми отримали це, працюючи над http://www.goldtree.co.za/work

— Я - Голдтрейд
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.