alex.raven
Есть сетка из div-ов, каждый из которых имеет фиксированную ширину, но динамическую высоту (т.к тумбы все разной высоты). Результат должен выгдядеть вот так:
В принципе, и pinterest, и sex.com строят эту сетку одинаково: эти все "пины" засунуты каждый в отдельный div, у которого position: absolute, и заданы top:, left:. Но на данном этапе мне не нужно динамически строить "бесконечную" страницу, подгружая новые пины по мере прокрутки. Т.е, их будет известное количество (скажем, 50) + страничная навигация. Поэтому, вижу несколько способов, как построить такую сетку.
1) Сделать настоящую таблицу <table>, с вертикальными ячейками, и впихнуть туда эти пины, имхо, самый простой вариант. При этом не надо париться насчёт размеров и фиксированных позиций - браузер всё нарисует сам.
2) Использовать классический метод, с фиксированной позицией пинов. Но здесь немножко более геморно, т.к придётся динамически менять им позицию. Я это вижу так: на каждый пин вешаем отслеживание изменения его размера (т.е проверяем, подгрузилась ли картинка), вычисляем позицию пина, который расположен ниже нашего с учётом новых размеров.
3) Какой-то другой способ.
Хотелось бы знать, что посоветуют умные програмеры?
alex.raven
X-dream писал:
при большом количестве пинов грузится долго сверху в низ.
это понятно, ведь они уже все отрисованы изначально. но у меня их будет штук 50 на странице.
AWD
alex.raven писал:
на каждый пин вешаем отслеживание изменения его размера (т.е проверяем, подгрузилась ли картинка),
а как насчет getimagesize, чтоб не париться об изменении размера? вообще плохой тон - не указывать размер пикчи, и w3 обидится
, и для юзера не очень, когда все начинает прыгать при подгрузке...