raselgit
@raselgit
Веб-дизайнер

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

Такая ситуация:

Не могу найти информацию о том, как вывести записи в таком виде:

92392fdb1f6e4f739fbedaa9c3dc7e27.png

Нужно реализовать именно так, т.е. есть два вида, квадратный и прямоугольный и выводиться они должны именно в этом порядке. Может какой-нибудь цикл нужно прописать или это как-то по другому делается. Кто сталкивался, отпишитесь.
  • Вопрос задан
  • 309 просмотров
Решения вопроса 1
HeadOnFire
@HeadOnFire
PHP, Laravel & WordPress Evangelist
1. На стороне PHP - перед циклом стартовать счетчик, дальше проверять:
<?php
$step = 1;
while( have_posts() ) : 
    the_post();

    if( $step % 9 == 0 ) { // каждому 9му прописываем кастомный класс
        $class = 'nine';
    } elseif( ( $step % 5 ) % 2 !== 0 ) { // тут хитрее, каждому 5му через один шаг (5, 15, 25...)
        $class = 'five';
    } else {
        $class = '';
    }
    ?>

    <!-- A тут уже выводим элемент и дописываем класс -->
    <div class="<?php echo $class; ?>">
        ...
    </div>

    <?php
    // Увеличиваем счетчик
    $step ++;
endwhile;
unset( $step ); // Не обязательно, но лучше такие вещи подчищать. Нано-оптимизация :)
?>

2. Но лучше через CSS
/* Каждый 9й элемент */
.item:nth-child(9n) {
     ...
}
/* Каждый 5й, но через один (нечетный) */
.item:nth-child(5n):nth-child(odd) {
    ...
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Palych_tw
@Palych_tw
Типа веб-разработчик
Записи выводятся через цикл get_posts() или WP_Query(). Добавьте в цикл некую переменную-счетчик и каждой 4-ой или 5-ой записи добавляйте класс нужный. Ну а вообще в CSS есть nth-child.
Ответ написан
Комментировать
@mais64
Фронтенд разработчик
Ответ написан
Комментировать
@IceJOKER
Web/Android developer
Просто для интереса для себя нарисовал такую таблицу на JS:
https://jsfiddle.net/x91xr0ed/2/
По-моему получился жуткий гкод (меня можно простить, писал код на усталую голову) :D

это чтоб просто дать понять как можно такое сделать ))
Ответ написан
Ваш ответ на вопрос

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

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