Реклама на сайте Advertise with us

Нужен совет по построению сетки

Расширенный поиск по форуму
 
Новая тема Новая тема   
Автор
Поиск в теме:

Мотиватор :)

С нами с 06.05.09
Сообщения: 3028
Рейтинг: 607

Ссылка на сообщениеДобавлено: 04/07/12 в 12:04       Ответить с цитатойцитата 

Есть сетка из div-ов, каждый из которых имеет фиксированную ширину, но динамическую высоту (т.к тумбы все разной высоты). Результат должен выгдядеть вот так:



В принципе, и pinterest, и sex.com строят эту сетку одинаково: эти все "пины" засунуты каждый в отдельный div, у которого position: absolute, и заданы top:, left:. Но на данном этапе мне не нужно динамически строить "бесконечную" страницу, подгружая новые пины по мере прокрутки. Т.е, их будет известное количество (скажем, 50) + страничная навигация. Поэтому, вижу несколько способов, как построить такую сетку.

1) Сделать настоящую таблицу <table>, с вертикальными ячейками, и впихнуть туда эти пины, имхо, самый простой вариант. При этом не надо париться насчёт размеров и фиксированных позиций - браузер всё нарисует сам.

2) Использовать классический метод, с фиксированной позицией пинов. Но здесь немножко более геморно, т.к придётся динамически менять им позицию. Я это вижу так: на каждый пин вешаем отслеживание изменения его размера (т.е проверяем, подгрузилась ли картинка), вычисляем позицию пина, который расположен ниже нашего с учётом новых размеров.

3) Какой-то другой способ.

Хотелось бы знать, что посоветуют умные програмеры?

Just a signature.

0
 

пьяный мастер

С нами с 06.09.05
Сообщения: 11906
Рейтинг: 5835


Передовик Master-X (16.12.2006) Передовик Master-X (01.01.2007) Передовик Master-X (16.01.2007) Передовик Master-X (16.09.2020)
Ссылка на сообщениеДобавлено: 04/07/12 в 12:22       Ответить с цитатойцитата 

alex.raven писал:
самый простой вариант


при большом количестве пинов грузится долго сверху в низ.

5
 

Мотиватор :)

С нами с 06.05.09
Сообщения: 3028
Рейтинг: 607

Ссылка на сообщениеДобавлено: 04/07/12 в 12:26       Ответить с цитатойцитата 

X-dream писал:

при большом количестве пинов грузится долго сверху в низ.


это понятно, ведь они уже все отрисованы изначально. но у меня их будет штук 50 на странице.

Just a signature.

0
 

www.phpdevs.com

С нами с 24.10.02
Сообщения: 16633
Рейтинг: 16105


Передовик Master-X (01.09.2005) Передовик Master-X (16.09.2005) Передовик Master-X (01.10.2005) Передовик Master-X (16.08.2006) Передовик Master-X (16.10.2006) Ветеран трепа Master-X ()
Ссылка на сообщениеДобавлено: 04/07/12 в 22:52       Ответить с цитатойцитата 

Есть похожее на jquery , может подойдет.
http://masonry.desandro.com

Пишу на php/mysql/django за вменяемые деньги.
Обращаться в личку.

0
 



С нами с 03.02.11
Сообщения: 842
Рейтинг: 301

Ссылка на сообщениеДобавлено: 05/07/12 в 11:57       Ответить с цитатойцитата 

alex.raven писал:
на каждый пин вешаем отслеживание изменения его размера (т.е проверяем, подгрузилась ли картинка),
а как насчет getimagesize, чтоб не париться об изменении размера? вообще плохой тон - не указывать размер пикчи, и w3 обидится icon_cool.gif, и для юзера не очень, когда все начинает прыгать при подгрузке...

0
 

пьяный мастер

С нами с 06.09.05
Сообщения: 11906
Рейтинг: 5835


Передовик Master-X (16.12.2006) Передовик Master-X (01.01.2007) Передовик Master-X (16.01.2007) Передовик Master-X (16.09.2020)
Ссылка на сообщениеДобавлено: 09/07/12 в 09:57       Ответить с цитатойцитата 

Stek писал:
Есть похожее на jquery , может подойдет.
http://masonry.desandro.com


спасибо огромное за это smail54.gif

0
 



С нами с 05.05.05
Сообщения: 1913
Рейтинг: 1134

Ссылка на сообщениеДобавлено: 11/07/12 в 07:40       Ответить с цитатойцитата 

если ширина одинаковая, разлиновать и положить друг за дружкой в столбики

0
 
Новая тема Новая тема   

Текстовая реклама в форме ответа
Заголовок и до четырех строчек текста
Длина текста до 350 символов
Купить рекламу в этом месте!


Перейти:  



Спонсор раздела Стань спонсором этого раздела!

Реклама на сайте Advertise with us

Опросы

Рецепт новогоднего блюда 2022



Обсудите на форуме обсудить (11)
все опросы »