» » Новости в две, три, четыре и т.д. колонки (развитие мысли)

Новости в две, три, четыре и т.д. колонки (развитие мысли)

24.03
60
37 165
Новости в две, три, четыре и т.д. колонки (развитие мысли)

Эта статья - логическое продолжение поста про новости в две колонки (jQuery Edition).

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

Итак суть по прежнему не меняется, будем использовать jQuery, но на этот раз код сократится до 1 строчки, что положительно влияет на скорость загрузки страницы (пусть и совсем незначительно).

Не буду лить лишнюю воду, покажу сразу пример реализации, здесь я немного модифицировал скрипт, для наглядности, но суть не меняется. Кстати комплексная поисковая оптимизация сайтов - не так у и дорого.
Разбирать же будем вариант с тремя колонками новостей.

Реализация

1. Код в shortstory.tpl должени иметь примерно такой вид:
<div class="news">
содержание shortstory и всякие теги,
главное тут - "обёртка" всего содержимого shortstory.tpl
</div>


2. Обязательные стили в CSS:
.news.float {
    float: left;
    width: 30%; //значение зависит от желаемого количества колонок (например для 5ти колонок нужно указать 18-20%)
    }
.clr {
    clear: both;
    height: 0;
    overflow: hidden;
    }


3. Ну и самое главное - jQuery-код:
<script type="text/javascript">
jQuery(function($) {
    $(".news").addClass("float").filter(":nth-child(3n)").after('<div class="clr"></div>');
});
</script>


Как видно из строки кода - всё совершенно просто - сначала дописываем всем блокам с классом news дополнительный класс, а потом дописываем после каждого третьего блока пустой div с слассом clr - это для того, чтобы новости имели ровное горизонтальное положение, а не плавали так, как им захочется.

Как настроить?

Легко!
Всё что нужно - это заменить цифру три в строке :nth-child(3n) на желаемую, и в CSS заменить width: 30%; на нужное значение (как правило методом подбора).

Ну и как обычно - включаем фантазию и делаем красиво smile

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

Комментарии

sar
sar 11 августа 2011 14:53
Спасибо, получилось отлично, а можно ли сделать так, чтобы новости выводились в одну колонку по горизонтали, т.е по строке, а не по столбику ( колонке)
ПафНутиЙ
ПафНутиЙ 11 августа 2011 16:08
т.е. типа вот такого?
| новость 1 | новость 3 |
| новость 2 | новость 4 |


sar
sar 12 августа 2011 11:34
не совсем, имеется шаблон, где новости выводятся

| новость 1 |
|новость 3 |
|новость 2 |
|новость 4 |


Шаблон переделывать не хотел, а вот через jquery просто интересно попробовать
Нужно, чтобы вывод новостей осуществлялся горизонтально, т.е :
| новость 1 | новость 2 |новость 3 |

p.s спасибо, что так быстро ответили
ПафНутиЙ
ПафНутиЙ 12 августа 2011 11:42
float: left; в css к классу с новостями добавить, и будет так выводить.
General
General 12 сентября 2011 00:05
Привет, а возможно реализовать так, что бы в каждой колонке выводились новости из определенной категории? То есть строго колонка один - новости только id1, колонка 2 - новости id2 итд. ?
ПафНутиЙ
ПафНутиЙ 12 сентября 2011 00:18
General,
Да, через custom
Делается 3 блока custom шириной 33% и float: left; и всё.
rusik196
rusik196 15 октября 2011 22:43
Не знаю у кого как, но у меня почему-то не сразу формируется список в несколько колонок!
При открытии странички выстраивается сначало обычный вид новостей, а через секунды 2-3 формируется в три колонки!
Почему так?Кто подскажет?
http://clips.portalkachka.ru
ПафНутиЙ
ПафНутиЙ 15 октября 2011 22:56
медленный интернет у вас))) скрипты не успевают за остальным кодом.
rusik196
rusik196 16 октября 2011 01:15
Цитата: ПафНутиЙ
медленный интернет у вас))) скрипты не успевают за остальным кодом.


А у вас нормально открывается?
У меня 2 мб/с smile
Возможно Опера тормозит
ПафНутиЙ
ПафНутиЙ 16 октября 2011 01:18
вполне нормально, но у меня реклама автоматом режется через расширение, ну и канал в 20мб/с ))))
В общем то скрипт простнький и тормозить по определнию не должен.
Fantomas
Fantomas 4 января 2012 14:17
Хм..у меня не пашет.. recourse
Сайт счас на денвере. Сделал все как описывалось. У меня получается так, что
2 колонка ниже первой, а третья ниже второй в чем ошибка, как сделать чтоб все было строго на одном уровне?
ПафНутиЙ
ПафНутиЙ 7 января 2012 18:51
Вероятно всё дело в неправильном скривлении рук.
radik
radik 25 февраля 2012 20:47
Подскажите пожалуйста.
а у меня разделители почему то получились выше всех новостей.

Почему так может быть?
ПафНутиЙ
ПафНутиЙ 25 февраля 2012 20:54
Косяки в вёрстке.
radik
radik 25 февраля 2012 21:08
вроде бы все сделал как у Вас написано.
шаблон Pisces
если прописываю в shortstory.tpl
<div class="news_clr">
</div>

в самом конце, то разделители появляются вверху
Если
<div class="news_clr">
прописываю вначале, а закрывающий тэг в конце, то разделители в середине.
madfragg3r
madfragg3r 8 июня 2012 16:11
Все работает,но чет невникну как поменять ширину между колонками..
D0Gmatist
D0Gmatist 24 сентября 2012 03:27
бред .. полный .. достаточно рассчитать тот контекст в котором у вас будет отображаться итог и всё .... кто знает тот поймет

достаточно всё повесить через

.x {
float:left;
}

или

.x {
float:right;
}
websot
websot 25 сентября 2012 16:19
ну если ты такой великий математик и не подумал про размер картинок и текста то тебе подойдет
sharkoster
sharkoster 31 марта 2013 18:47
А самый сок этого скрипта в том можно получить и в блоке "похожие новости" новости в две три.., и сколько надо колонок.
ПафНутиЙ
ПафНутиЙ 31 марта 2013 18:57
Да вроде как давно можно такое получить и без скрипта)
raziel2101
raziel2101 19 апреля 2013 16:59
ПафНутиЙ,
Здравствуйте у меня проблема...нехочет выстраивать в 3 колонки делал все по инструкции временный адрес http://www.epichu.bget.ru/
ПафНутиЙ
ПафНутиЙ 19 апреля 2013 22:23
Из шаблона краткой новости уберите в конце
<div class="news_clr alt"></div>
fox1q
fox1q 7 августа 2013 09:48
Перед кнопками пагинации нужно добавить еще
<div style="clear: both;"></div>

иначе на страницах, где будет не хватать материалов, кнопки будут идти за последним блоком во 2,3 колонке, а не под всеми новостями.
Кстати, как выделить с помощью nth-child вторую колонку? (всего 10 новостей по 2 колонки)У меня почему-то никак не хочет выделять с помощью
 $(".news:nth-child(even)").addClass("tab2"); 

выделяет так
<div class="news float">
<div class="news float tab2">
<div class="clr"/>
<div class="news float tab2">
<div class="news float">
<div class="clr"/>
<div class="news float">
<div class="news float tab2">
<div class="clr"/>
<div class="news float tab2">
<div class="news float">
<div class="clr"/>
<div class="news float">
<div class="news float tab2">
<div class="clr"/>
gogsi
gogsi 11 января 2014 17:10
Подскажите, как убрать отступы
ПафНутиЙ
ПафНутиЙ 11 января 2014 20:11
адрес сайта?
gogsi
gogsi 12 января 2014 05:19
Я на локальной тестирую, меня интересует, как убрать эти отступы
NSX
NSX 2 октября 2016 17:53
Подскажи как вызвать функцию в зависимости от разрешения экрана, чтобы на разных устройствах разное количество колонок было..

Пробывал с помощью If else if сделать.. ниче не получается.
ПафНутиЙ
ПафНутиЙ 2 октября 2016 22:19
Используй медиазапросы в css, можно обойтись и без js.
NSX
NSX 3 октября 2016 20:08
ПафНутиЙ,
я как раз разобрался как твой код засунуть в if else все работает... теперь вот решил что все таки css лучше но не пойму что в медиазапрос писать, там же колонки...там как то непросто)
NSX
NSX 3 октября 2016 20:10

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

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

Информация

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