Pull to refresh

Заполнение пустого пространства плавающими блоками. Разбор 2-ух примеров реализации. От Яндекса и от студии Лебедева.

Reading time 1 min
Views 704
Недавно столкнулся с проблемой реализации плавающих блоков в одном интернет магазине. Суть в том, что товары выводятся в виде блоков. По задумке количество блоков по горизонтали должно меняться в зависимости от разрешения экрана. Использовать float в тупую не удалось из-за не фиксированой высоты блоков.
Немного погуглив я ничего не нашел. Зато вспомнил, что видел подобное на Яндексе и в магазине студии Лебедева.
Сообственно я выкладываю сюда для ознакомления то, что вы и сами можете найти в указанных источниках. Все, что я сделал это почистил от лишнего кода. Если-бы я нашел подобный пост раньше это сэкономило-бы мне время.


Каждый из этих способов обладает своими достоинствами и недостатками. Посмотрим:

Пример от Яндекса и источник
+ Нет ограничения по высоте блока
+ Заполняет все пустое пространство
— Использует довольно большой javascript
— Используются таблицы

Пример от студии Лебедева и источник (Спасибо за оставленные комментарии)
+ Без javascript
+ никаких таблиц
— Не заполняет пустое пространство когда его не достаточно для нового блока
— Жесткое ограничение по высоте блока

Если вы знаете другие интересные примеры — пишите. Пополню коллекцию.
Tags:
Hubs:
+17
Comments 18
Comments Comments 18

Articles