» » Вывод новостей в 2 колонки (jQuery edition)

Вывод новостей в 2 колонки (jQuery edition)

30.05
37
38 292
Вывод новостей в 2 колонки (jQuery edition)

Сегодня я покажу вам, простейший и в то же время универсальный способ вывода новостей в две колонки с помощью CSS и jQuery.
Способ этот примечателен двумя моментами:
1 - Корректный вывод новостей, независимо от высоты каждой новости в отдельности (объясню этот момент пожже, если кому то не понятно).
2 - Если в браузере отключены яваскрипты, новости будут выводиться в 1 колонку, не уродуя дизайн сайта.

Итак, обо всём по порядку:


Для начала взгляните на демонстрацию того о чём будет эта статья.
Введение.
Вывод новостей в две колонки в DLE довольно распространённая проблема, имеющая решения как на php так и более простой вариант - на CSS, о котором я рассказывал ещё в самой первой статье моего блога, с тех пор утекло немало воды, и вот сегодня на ум пришло ещё одно решение данной проблемы, и, насколько мне известно, через jQuery никто даже не пытался реализовать вывод новостей в 2 колонки. А между тем мне кажется это самый, универсальный и эффективный способ.

Чтобы не быть голословным, рассмотрим нижеприведённый скриншот.

Вывод новостей в 2 колонки (jQuery edition)


На картинке отчётливо видны различия вывода новостей между чистым css и jQuery.

Реализация.

Идея реализации проста: через jquery присваивать блокам с новостями определённые свойства.

1. HTML-код

Как пример возьмём шаблон Tango_RUS, его shortstory.tpl после небольшой доработки будет выглядить вот так:
<div class="news">
    ........пропущен код..........
</div>
<div class="news_clr"></div>

Я показал только ключевые блоки, чтобы не отвлекать от сути вопроса.
Блок с классом news_clr - это будующий разделитель пар новостей.

2. Подключаем jQuery
Открываем main.tpl и перед </head> пишем:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
  function()  {
    $("div.news").addClass("alt");
    $("div.news_clr:even").addClass("alt");
  });
</script>

Теперь каждому блоку с классом news и каждому второму блоку с классом news_clr будет присваиваться дополнительно класс alt.

3. CSS
Открываем style.css
и дописываем несложные свойства:

.news.alt {
    float: left;
    width: 45%;/*значение подбирается индивидуально*/
}
.news_clr {
    height: 0;
    clear: both;
}
.news_clr.alt {
    clear: none;
}


Итог

При работе jQuery скрипта каждый блок с новостями будет иметь 45 процентную ширину и обтекание слева, а каждый второй блок news_clr не будет иметь обтекания вообще. Таким образом каждые 2 новости визуально будут отделяться от двух следующих, а при отключенных яваскриптах новости будут отображаться стандартно - в 1 колонку. Остаётся только добавить, откуда взялось 45% - эта цифра взята не с потолка а подобрана "методом научного тыка", т.е. взависимости от отступов у блока с классом news, ширины шаблона (фиксированной или "резиновой") в каждом конкретном случаи эта цифра будет разная и не обязательно должна указываться в процентах, для фиксированной ширины шаблона можно указывать точную ширину блока.


Немного о цветах: заказать букет.

Похожие материалы

Комментарии

doktorpull
doktorpull 12 апреля 2015 08:46
ПафНутиЙ а как можно сделать, чтобы блоки оптикали друг друга. Как сделано это на картинке ниже.
doktorpull
doktorpull 12 апреля 2015 08:46
Вот сама картинка к придыдущему сообщению не прикрепилась. https://dribbble.com/shots/1488624-Medium-Homepage-Exploration/attachments/222962
ПафНутиЙ
ПафНутиЙ 12 апреля 2015 11:19
Как выглядит вёрстка?
Arios
Arios 5 октября 2015 10:34
Я немного не понимаю. Почему не работает псевдокласс nth-child(even) или тоже самое nth-child(2n)? А вот если добавлять класс через скрипт, то все в порядке.
ПафНутиЙ
ПафНутиЙ 5 октября 2015 12:51
Думаю ссылка на сайт многое прояснила бы.
Arios
Arios 5 октября 2015 16:45
ПафНутиЙ,
Данный способ у меня работает, вот только я не понимаю одного. Вместо
$("div.news_clr:even").addClass("alt");

Логичнее использовать псевдокласс
div.news_clr:nth-child(even)

Это по сути одно и тоже, но через скрипт все отображается корректно, а на чистом css все выглядит не совсем так, как надо.
ПафНутиЙ
ПафНутиЙ 5 октября 2015 16:54
см. предыдущий комментарий, я к сожалению, не обладаю телепатическими способностями и не могу сказать что не так.

Добавить комментарий

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

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.