Как сделать не стандартный грид или может есть плагин адаптивного не стандартного грида?

Question

[Игорь Пушкарский]

Всем привет!
Что нужно, алгоритм который будет выводить такой не стандартный грид средствами PHP или Smarty. Или JS плагин, который будет делать, что то на подобии , но обязательное требование адаптивность.

Опишу ситуацию:

1. 1300 категорий, какие то популярные какие то нет, их нужно собрать из разного размера блоков, категорий конечно будет не более 40-50, а то и меньше. Размер показывает на приоритет.
2. Все блоки должны строится на основе указанного атрибута из админки например big, middle, small и т.д.
3. Должна быть возможность как то компоновать и перестраивать положение элементов, в ручном режиме.

Смотрел в сторону gridster.net/#serialize_method в принципе есть все, даже есть вывод сетки где какой блок расположен, но нет адаптивности.

PS: должна быть возможность выбора расположения элементов в ручную в админке.

Answer 1

[Dmitry Bay]

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

По поводу сетки же, возможно сетка бутстрап подойдет. причем, если отрисовывать средствами php, то можно просто накапливать контент по блокам, например -

идти по элементам, если элемент меньше стандартного (10 наборов косметики), то объединять его в подблоки. например, 1 единица высоты блока - это 1/4, значит собираем блоки меньше стандартного, чтобы набрать нужную нам высоту. и потом отрисовывать элемент. в таком случае, те блоки, что необходимы на первом месте, будут около этого первого места. а потом собраться остальные в зависимости от страницы.

Comments

[Игорь Пушкарский]

Я все же склоняюсь к варианту с bootstrap, самый лучший на мо взгляд вариант, но малость знаний маловато как это организовать в виде цыкла правильно, что бы не пропустить лишние элементы и собрать в том порядке который указан в приоритете.

[Dmitry Bay]

Игорь Пушкарский: программисту будет не сложно вставить это по факту.

по бутстрапу, если не знакомы, то посмотрите это сначала - https://www.youtube.com/watch?v=AYkEfr-5b1o

например, по картинке, что вы скидывали с картинками, я бы сделал так (на среднем экране md)

блок стандартного блока позиционируется как div c классами = "col-md-3 category"
блок расширенного блока "col-md-6 category"

внутри этих блоков элемент div с классом .item1 - .item4 в зависимости от высоты блока.

в стилях:

.category {height: 400px; /* хотя тут не уверен, как поведет при сжатии элемента картинка*/}
.category .item1 {height: 25%;}
.category .item2 {height: 50%;}
.category .item3 {height: 75%;}
.category .item4 {height: 100%;}

[Игорь Пушкарский]

Со стилями и html это не проблема, сверстать это полчаса делов. Поду придумывать как реализовать в админке создание групп, для вставки в них элементов

[Dmitry Bay]

Игорь Пушкарский:
А чего придумывать.
В админке я бы сделал так, добавил бы следующие поля:

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

Так же, у вас есть 4 разновидности отображения блока (по картинкам соответственно). выбирать можно селектом.

А вот дальше самое интересное.

Предположим, у нас есть массив элементов, которые мы получили от сервера.

Далее, используем приблизительно след код:
/* type - 1-4, в зависимости от размера блока */

$elements = [];

$block = []; // маленькие элементы
$sizeblock = 0;

$tempblock= false; // временные элементы

$out = [];

foreach ($elements as $element) {
if (($element->type == 3) or ($element->type == 4)) {
$out[] = $element;
} else if (($element->type == 1) or ($element->type == 2)) {

if (($tempblock) and ($sizeblock < 3)) {
$block[] = $tempblock;
$tempblock = false;
$sizeblock = $sizeblock + 2; // размер $tempblock 2 как правило
}

if (($element->type == 2) and ($sizeblock >= 3)) {
$tempblock = $element;
}

if ($sizeblock != 4) {
$blockp[] = $element;
}

if ($sizeblock == 4) { // записываем и очищаем блоки
$out[] = $block;
$sizeblock = 0;
$block = false;
}

}
}