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

Добрый день!
Есть задача: выводить статьи на сайте в виде сетки, выделяя некоторые посты двойным размером. Пример на the-village и ему подобных сайтах.
3edeb3c4f34d4a8cac462cc05f228962.png5c608decd2aa489cb3434de8834f2769.png
<div class="item">Пост</div>
<div class="item x2">Пост</div>
<div class="item">Пост</div>


.item {display:inline-block;width:25%;}
.x2 {width:50%;}


Есть несколько вариантов, как это сделать:

Вариант 1. Разметка пользователем.
Пользователь в админке помечает определенные посты меткой и этот пост получает свой css-класс.
Проблема очевидна: если в вышеприведенном примере пользователь добавит пост с меткой, то пост №2 вылезет за пределы контейнера:

04861b279b8e4600b3752c514ec4a82a.png

Учитывая, что постов может быть 30-40, не думаю, что редактор the-village при каждом добавлении поста, высчитывает и подгоняет остальные материалы, снимая/добавляя метки.

Вариант 2. Заранее подготовленная матрица.
Посты выводятся по заложенной схеме. Пример для четырех колонок:
2 1 1
1 1 1 1
2 2
1 1 2


При добавлении, каждый пост будет сдвигаться и получать тот или иной css-класс, в зависимости от места.
Проблема: схема не дает пользователю свободы над контентом: невозможно заставить выводится пост "ААА!" всегда в двойном виде — время от времени, он будет "скакать" по размеру.

Вариант 3. Вычисляемый алгоритм.
Прежде чем выводить посты, алгоритм разбивает их на группы по числу колонок (в нашем случае, группа по 4 поста).
В каждой группе алгоритм случайно назначает постам числа, чтобы итоговая сумма была не больше 4.
Выводит посты.
Лента станет поживее за счет случайности форматов, но свободы над контентом по-прежнему немного.

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

Подскажите, как лучше поступить и как бы вы решили эту задачу. Спасибо.
-------------------------------------------
UPD: Вопрос, скорее, не про бутстрап и верстку: заранее нельзя предугадать, какой будет порядок постов:
// может быть так, это уложится в 12-колоночный макет:
<div class="row">
    <div class="col-6"> </div>
    <div class="col-3"> </div>
    <div class="col-3"> </div>
</div>

// а может быть и так: три супер-поста подряд и ничего не влезет:
<div class="row">
    <div class="col-6"> </div>
    <div class="col-6"> </div>
    <div class="col-6"> </div>
</div>
  • Вопрос задан
  • 802 просмотра
Решения вопроса 2
LeEnot
@LeEnot
Енот-андроид
Почитайте это, там вверху еще ссылки, может, подойдет что
Ответ написан
IGreench
@IGreench
Software Developer
Здравствуйте.

Все варианты имеют место в решении задачи. Однако, нужно понять, чего вы хотите.

  • Все ли строки сетки должны быть заполненными?
  • Насколько важен порядок постов?
  • Можно ли менять размер поста, чтобы он органичнее входил в сетку?
  • Насколько "свободными" могут быть действия пользователя?


Вообще, подобные ресурсы делают адаптивный дизайн. Как же решается эта задача? Просто делают float-блоки со статическими размерами (Вот хорошая статья на тему: www.artlebedev.ru/tools/technogrette/html/thumbnails/) и указывают у каждого поста требуемый стиль, задающий ширину. Например, у the-village есть CSS стили "post-block-superfeature-content" и "post-block-featured". А также, у них есть CSS классы на высоту поста. Проблема первого варианта решается пустой ячейкой в "сетке". Почему в "сетке"? Потому что явной сетки там нет.

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

Предлагаю некоторый "Вариант 5", в котором алгоритм компонует посты в соответствии с размером и приоритетностью постов. Сначала отображаются посты с более высоким приоритетом, и если пост не влазит в ячейку, то заполняем ячейку сетки постом с меньшим приоритетом. Если таких постов нет, то оставляем пустую ячейку.

Если нужны заполненные все строки сетки, то тут две ситуации. В первой ситуации у нас статическое число постов, а значит их можно статически заранее расставить для статической или динамической ширины сетки. Вторая ситуация - это динамическое число постов. Тут можно просто не указывать неполную строку.

Про реализацию.


На этом всё. Желаю удачи с решением задачи ;)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@inDeepCode
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы