как воспроизвести абсолютный макет стека div на сайте pinterest.com [закрыто]

104

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

jquery css layout Chrickso
источник
Я написал свой собственный код с помощью простых JQuery и CSS. Если вы хотите, чтобы это изменилось при изменении размера, просто оберните его в функцию и посмотрите, как изменится
Эндрю WC Браун,

Ответы:

79

Вы также можете проверить подключаемый модуль jQuery Masonry для такого рода функций.

Боб.
источник
3
Поистине потрясающая библиотека. Сейчас пользуюсь без проблем.
AhmetB - Google,
183

Я написал скрипт Pinterest. Идентификаторы не связаны с макетом и используются для других JS, связанных с взаимодействием. Вот как это работает:

Заранее:

  • Абсолютно установите контейнеры для игл
  • Определите ширину столбца
  • Определите отступ между столбцами (желоб)

Настройте массив:

  • Получить ширину родительского контейнера; рассчитать количество столбцов, которые подойдут
  • Создайте пустой массив, длина которого равна количеству столбцов. Используйте этот массив для хранения высоты каждого столбца при построении макета, например, высота столбца 1 сохраняется как array [0]

Пропустите каждый штифт:

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

Результат легкий. В Chrome размещение полной страницы из 50+ контактов занимает менее 10 мс.

Эван Шарп
источник
4
Как вы имеете в виду рассчитать высоту колонны? Как узнать, какой высоты она должна быть, если вы не знаете количество и высоту предметов в ней? Есть ли шанс, что вы могли бы создать какой-нибудь псевдокод для демонстрации?
Майкл Джованни Пумо
22
вот прочный учебник - benholland.me/javascript/…
hollandben
1
Отзыв от анонимного пользователя (найден в очереди редактирования): Любопытно, что я сделал точно такой же сценарий в jQuery, с небольшой разницей, фактически создав таблицу с 1 строкой и N столбцами и просто добавив их в самый короткий столбец слева направо. приоритет. Несмотря на то, что я также добавил константу «Минимальная разница в высоте», необходимая для фактического пропуска столбца при позиционировании слева направо, это дает макету хронологически интуитивно понятное отображение, не теряя при этом максимально возможную
высоту
1
@MichaelGiovanniPumo Я думаю, что высота должна быть известна до макета (в случае Pinterest), у них нет «начального» состояния, в котором div перекрывают друг друга. Этого нельзя сделать, если высота неизвестна.
ptgamr 03
1
Ссылка @ hollandben мертва, новая ссылка: benholland.me/javascript/2012/02/20/…
Lukmo
57

Мы выпустили плагин jQuery, потому что нам несколько раз задавали один и тот же вопрос для Wookmark . Он создает именно такой макет. Посмотреть здесь - плагин Wookmark jQuery

ГБКС
источник
4
Кажется, что это решение загружается быстрее, чем кладка
Майкл Уотсон,
что ты находишь лучше? вукмарк или кладка?
Ramje 07
Я предпочитаю это каменной кладке, кажется, быстрее, как сказал Майкл.
nerdburn 07
2

Рассмотрев все варианты, я реализовал макет, похожий на Pinterest, следующим образом:

Все DIV:

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

Благодаря этому они располагаются в строках лучше, чем когда они перемещаются.

Затем, когда страница загружена, я повторяю все DIV в JavaScript, чтобы удалить промежутки между ними. Он работает достаточно хорошо, когда:

  1. ДИВ не сильно различаются по высоте.
  2. Вы не возражаете против мелких нарушений порядка (некоторые элементы, которые были ниже, можно подтянуть вверх).
  3. Вы же не против, чтобы нижняя строка была разной высоты.

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

особенно
источник
Эй, не могли бы вы рассказать мне, как вы рассчитали смещение, которое вам пришлось вычесть? А также как вы решили проблему с тем, что последний элемент находится справа, потому что есть один элемент, который немного больше и толкает его туда.
Лукас Опперманн
@LukasOppermann 1) Смещение для плитки - это сумма смещения для плитки в том же столбце в предыдущей строке и разницы между высотой самой высокой плитки в предыдущей строке и высотой плитки в том же столбце в предыдущем ряду. Взгляните на dev.sheeporpig.com/news (сначала вам нужно щелкнуть ссылку dev.sheeporpig.com/sheep/3210, чтобы получить доступ к сайту разработки - чтобы вы могли видеть несжатые и прокомментированные сценарии в отдельных файлах), файл сценария stock_news.js, функция compressTiles.
esp
@LukasOppermann 2) Если вы используете CSS как в ответе (особенно display: inline-block), этого не произойдет. Это происходит только в том случае, если вы float: left ваши div. Я не использую float.
esp
0

Они разделяют объекты по столбцам с идентификаторами (плохое решение ... лучше используйте имена классов), а затем вычисляют позиции по группам столбцов

ant_Ti
источник
2
+1 За то, что посмотрели их исходный код.
Bojangles
Это было интересно для меня, но я думаю, что есть лучшее решение с меньшим количеством вычислений js
ant_Ti
display: inline-blockЯ полагаю, вы могли бы использовать , но предметы разной вертикальной высоты не будут сидеть вместе.
Bojangles
1
лучше использовать контейнеры столбцов (div с float:left;и последний с overflow: hidden;) и хранить элементы там
ant_Ti
4
Хорошая точка зрения. Если вы действительно хотите пойти по пути JavaScript, вы могли бы использовать jQuery Masonry?
Bojangles
0

Вы можете использовать числа с плавающей запятой и размер вашей ширины div, используя проценты вместе с min-width, чтобы заставить div автоматически падать после достижения минимальной ширины? Так мы работали над http://www.goldtree.co.za/work

Я Голдтри
источник