Как реплицировать pinterest.com

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

Ответы

Ответ 1

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

Ответ 2

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

Заблаговременно:

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

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

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

Прокрутите каждый вывод:

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

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

Ответ 3

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

Ответ 4

Посмотрев на все варианты, я закончил реализацию макета, подобного Pinterest таким образом:

Все DIV:

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

Это делает их положение в строках лучше, чем когда они плавают.

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

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

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

Ответ 5

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

Ответ 6

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