Как сделать такой каталог?

Question

[Anton Essential]

Добрый день.
В недрах интернета нашел магази тыц, в разделе какталог на который ведет линк организован вывод подкатегорий, категории оформленны с каким то рондомом, некоторые позиции длинные некоторые короткие, что то слева что то справа, сверстать статично такой макет не проблема.
Хочу сделать что то похожее, но не совсем понятно как это делать, а именно вопрос при переносе на cms, ведь позиции будут выводится в цикел и получается, DOM оборачиваю циклом php, но тогда оно будет все повторяться один и тот же блок, либо они статично сверстали и в каждый блок вывели подкатегории, но тогда это какой то велосипед.
В общем не понимаю я как это сделано, возможно подскажите что почитать.

Answer 1

[Sali_cat]

В базе создаешь еще 1ну колонку. Она будет для размеров блоков.

Типо так, выводишь из базы всю инфу
<div class="class <?=$tip;?>"></div>
ну а в css прописываешь уже свои размеры.
к примеру будет это вот так выглядеть

<div class="class  size1">тут другая инф.</div>
<div class="class  size1">тут другая инф.</div>
<div class="class  size2">тут другая инф.</div>
<div class="class  size1">тут другая инф.</div>
<div class="class  size1">тут другая инф.</div>
<div class="class  size3">тут другая инф.</div>

итд. css наверное понял
size1 к примеру 25%
size2 50%
size3 100%

Comments

[Sali_cat]

Если массив, то там не много по другому, но смысл тот же.

Answer 2

[Александр Таратин]

masonry.desandro.com

Answer 3

[Александр Романов]

Какая разница, чем ты выводишь DOM? Тебе надо стилизовать это грамотно, а тут уже дело за тобой. В теории каждой категории в CMS можно присваивать опр. класс или ID и с помощью CSS уже играться с ними.

Comments

[Anton Essential]

с css проблем нет, получается нужен алгоритм который будет выводить эти блоки с определенными классами

[Александр Романов]

Да, если есть возможность просто в таблице с категориями пропиши им ID или классы и PHP выводи

Answer 4

[Sergej]

Способов много.
Но судя по картинкам: Если изображение товара по вертикале больше то блок вертикальный, соответственно если горизонт. то горизонтальный блок.
Но какой там алгоритм я хз. Они используют таблицы.

Answer 5

[Alex]

Эта структура формируется на РНР. В таблице colspan и rowspan прописаны сразу в HTML, если бы менялись с помощью javascrip то их бы не было бы в коде при просмотре crtl + U.
Как альтернативу можно использовать скрипт предложенный @Taraflex. Там будет достаточно вывести товары в div разных габаритов, а скрипт сам их отсортирует.