Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
Icons
1 / 1 / 2
Регистрация: 04.04.2015
Сообщений: 58
#1

Как расположить дивы сверху вниз - слева направо?

02.09.2015, 12:30. Просмотров 502. Ответов 6
Метки нет (Все метки)

Задача состоит в том, что-бы блоки располагались сначала сверху-вниз, а потом — слева-направо. То-есть результат должен быть таким:
1 4 7
2 5 8
3 6 9
Важно, что эти блоки должны генерироваться сами, т.к. это анонсы статей на главной странице.
Пробовал с column-count, но он не красиво обрезает дивы да и не во всех браузерах будет работать...
Чую нужен JS

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="conteiner">
   <div class="anons">
      <span>31.07.2015</span>
      <p>Текст, текст, текст...</p>
   </div>
 
   <div class="anons">
      <span>31.07.2015</span>
      <p>Текст, текст, текст...</p>
   </div>
 
   <div class="anons">
      <span>31.07.2015</span>
      <p>Текст, текст, текст...</p>
   </div>
 
......И так далее, число этих дивов постоянно будет менятся(добавлятся, удалятся)
 
</div>
Кто-нибудь может знает как JS может помочь?

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

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
02.09.2015, 12:30
Ответы с готовыми решениями:

Как заставить синий блок двигаться сверху вниз при прокрутке скрола?
Как заставить синий блок двигаться сверху вниз при прокрутке скрола? при этом...

Появление изображения слева направо
У меня имеется форма, внутри есть несколько гиф файлов. Нужно сделать так, чтоб...

Зеркальное отображение изображения слева направо
Вот собсна вопрос, можно ли создать зеркальное отображение изображение...

Кaк мoжнo рaспечaтaть лист ХТМЛ, если скрoлинг скрoлит егo не сверху вниз, a слевa нaпрaвo?
Кaк мoжнo рaспечaтaть лист ХТМЛ, если скрoлинг скрoлит егo не сверху вниз, a...

Как фильтровать/сортировать дивы (пример внутри)?
Всем привет Делаю сайт витрину, на очень простой ЦМС на файлах без базы...

6
Lazy_Den
2928 / 2608 / 1316
Регистрация: 15.01.2014
Сообщений: 5,732
02.09.2015, 12:50 #2
Icons, а при чём тут регулярные выражения? И почему бы не генерировать колонки на сервере? У вас есть некий массив данных, который можно разбить на три части (или сколько вам нужно) и каждую обернуть в отдельный элемент, который будет служить колонкой. Если работаете с php, то для таких целей может пригодиться функция array_chunk()
0
Icons
1 / 1 / 2
Регистрация: 04.04.2015
Сообщений: 58
02.09.2015, 13:12  [ТС] #3
Спасибо!
Я вёрстку делаю в HTML, мне бы без PHP это сделать...
0
Lazy_Den
2928 / 2608 / 1316
Регистрация: 15.01.2014
Сообщений: 5,732
02.09.2015, 13:53 #4
Цитата Сообщение от Icons Посмотреть сообщение
Я вёрстку делаю в HTML
Это превосходно, а анонсы вы тоже вручную прописываете в html? Если да, то что вам мешает так же вручную их распределить по колонкам? В общем, не понятно.
Смотрите такой пример.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var container = document.querySelector('.conteiner'),
    anons = document.querySelectorAll('.anons'),
    columnCnt = 3, // количество колонок
    chunk = Math.ceil(anons.length / columnCnt);
 
for(var i = 0, j = anons.length; i < j; i += chunk) {
    var part = [].slice.call(anons, i, i + chunk),
        div = document.createElement('div');
    div.className = 'column';
    for(var k = 0; k < part.length; k++) {
        div.appendChild(part[k]);
    }
    container.appendChild(div);
}
0
Icons
1 / 1 / 2
Регистрация: 04.04.2015
Сообщений: 58
02.09.2015, 15:24  [ТС] #5
Анонсы я прописываю вручную для примера, но потом их никто не будет прописывать...Сайт планируется в Битрикс...Будет куча документов, анонсы которых автоматом будут выводится на главную, по датам...Самые свежие должны добавлятся на верх первой колонки, последний, соответственно будет в 3-ей внизу.
Что-то не работает Ваш код((??
0
Lazy_Den
2928 / 2608 / 1316
Регистрация: 15.01.2014
Сообщений: 5,732
02.09.2015, 15:35 #6
Цитата Сообщение от Icons Посмотреть сообщение
Что-то не работает Ваш код
Вы же видели в песочнице, что работает? Значит уже что-то не так сделали вы у себя. Смотрите ошибки в консоли
1
Icons
1 / 1 / 2
Регистрация: 04.04.2015
Сообщений: 58
02.09.2015, 15:49  [ТС] #7
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Вы же видели в песочнице, что работает? Значит уже что-то не так сделали вы у себя. Смотрите ошибки в консоли
Всё работает!!! То что нужно!!
Не туда код вставил сначала...
Спасибо большое, опять выручили!!!
0
02.09.2015, 15:49
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
02.09.2015, 15:49

Слева направо сверху вниз
Слева направо от наименьших чисел к наибольшим используя 2-мepный мaccив!...

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

Цикл заполнения таблицы слева-направо и сверху вниз
Добрый ночер уважаемые форумчане! :) Есть Таблица-1 в неё нужно вносить данные...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru