Я хочу реплицировать макет div Pinterest.com, в частности, как количество столбцов настраивается, чтобы больше/меньше соответствовать размеру браузера, а вертикальная укладка не зависит от соседних высот столбцов. Исходный код показывает, что каждый div является абсолютным положением. Один из основателей ответил на сообщение Quora, в котором говорится, что это делается с помощью пользовательских jQuery и CSS. Я бы хотел, чтобы результаты отсортированы слева направо. Любое направление, которое вы могли бы предоставить, чтобы сделать это сам, было бы весьма полезно.
Как реплицировать pinterest.com
Ответ 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
Ответ 7
Почему вы не пытаетесь это сделать, просто js stuff
http://vanilla-masonry.desandro.com/index.html
Или даже это с jQuery и с загрузкой прокрутки.