Как правильно сверстать, дайте совет?

[ya_verstaka]

Привет всем,  уважаемые форумчане, прошу вашего совета по верстке.

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

[li4e]

Мне кажется никак универсально не сверстать, так как нужно учитывать z-index ну и позиционировать вручную. И каждую новую категорию надо будет допиливать.

 

На мангал дизайнера.

Edited May 24, 2015 by li4e

[afdw]

На JS просто случайный z-index и позицию задаёте и всё.

[antonKar]

Если дизайнер/манагер/заказчик/etc. распишет логику, то делайте по этой логике. В противном случае просто начинайте заново компоновать блоки как в дизайне, циклично.

[DivMan]

дизайнера на кол 

[antonKar]

дизайнера на кол 

Ну почему же, даже если не было объяснено, то всегда можно как-то выпутаться. И решать подобные задачи всё же лучше, чем верстать однотипные лендинги. 

 

Ещё раз подумал, можно их также циклично (по сути на картинке уже показан один полный цикл), но так как при повторении цикла будут проблемы с z-index при накладывании нового цикла под предыдущий, то можно в следующем цикле сделать блоки слева направо и справа налево. Мне кажется, что если в новом цикле блоки продолжать с такой же компоновкой, то выглядеть будет не ахти.

Edited May 25, 2015 by antonKar

[Switch74]

Можно попробовать стандартно

http://jsfiddle.net/r14LvrLu/

если будет много, то получится что-то вроде

http://jsfiddle.net/r14LvrLu/1/

естесно если грамотно подсчитать все размеры и отступы то будет все выравнено без смещения

 

а про смену положения сдвига вам правильно подсказали - будет красивее выглядеть и компенсироваться смещение за одно

[DivMan]

 

дизайнера на кол 

Ну почему же, даже если не было объяснено, то всегда можно как-то выпутаться. И решать подобные задачи всё же лучше, чем верстать однотипные лендинги. 

 

Ещё раз подумал, можно их также циклично (по сути на картинке уже показан один полный цикл), но так как при повторении цикла будут проблемы с z-index при накладывании нового цикла под предыдущий, то можно в следующем цикле сделать блоки слева направо и справа налево. Мне кажется, что если в новом цикле блоки продолжать с такой же компоновкой, то выглядеть будет не ахти.

 

 

Сверстать, то такое не сложно, только по мне так, это бредовый дизайн 

[ya_verstaka]

Всем спасибо за ответы! Решил сверстать без JS (не смог я додуматься как это сделать), спросил заказчика, говорит, что добавится максимум еще 4 категории, это существенно облегчило задачу. Влюбом случаи делаю сразу на wordpress, так что реализую  динамическое добавление классов с айдишниками категорий, и если что буду отдельно стилизировать каждую категорию.  Еще раз спасибо!!!

Edited May 25, 2015 by ya_verstaka