Хитрые колонки. Планшетофобия или поиск идеала

[Diasouls]

Доброго времени суток, уважаемые форумчане!

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

Есть у меня макет, положил в миниатюры. Суть его в том, что материалы в нем бесконечные, будут подгружаться, но это другая песня.

Сверстаны они вот так:

<div class="section group">

<div class="col span_1_of_3">
<div class="postbox">
Пост номер один
</div>
<div class="postbox">
Пост номер четыре
</div>
</div><!-- Closing tag: .col-->

<div class="col span_1_of_3">
<div class="postbox">
Пост номер два
</div>
<div class="postbox">
Пост номер пять
</div>
</div><!-- Closing tag: .col-->

<div class="col span_1_of_3">
<div class="postbox">
Пост номер три
</div>
<div class="postbox">
Пост номер шесть
</div>
</div><!-- Closing tag: .col-->

</div><!-- Closing tag: .section group-->

Заданы свойства через css (два файла, так что запросы не объединены):

.section{clear:both;margin:0;padding:0;}
.group:before,.group:after{content:"";display:table;}
.group:after{clear:both;}
.group{zoom:1;}
.col{display:block;float:left;margin:1% 0 0 1.6%;}
.col:first-child{margin-left:0;}

@media only screen and (max-width: 480px) {
.col{margin:1% 0;}
}

.span_3_of_3{width:100%;}
.span_2_of_3{width:66.1%;}
.span_1_of_3{width:32.2%;}

@media only screen and (max-width: 480px) {
.span_3_of_3,.span_2_of_3,.span_1_of_3{width:100%;}
}

@media only screen and (max-width: 768px) {
.span_1_of_3{width:100%;}
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
.span_1_of_3{width:49.2%;max-width::400px; }
}

На телефоне они спокойно расходятся в ширину, на планшете в две колонки, но вот с планшетом беда. Сами колонки из трех становятся двумя, но материал из третьей колонки, становится второй и получается, что третья колонка получает многим больше материала, чем первая. (Миниатюра 2)

Думаю вопрос уже все предугадали Как с этим бороться?

У меня в голове пока две версии:

1) Пересмотреть верстку, но идеи пока нет каким образом

2) Перемещать элементы с помощью JS из второго столбца в первый, если их там больше чем половина плюс два. Вроде это возможно, судя по googlопоиску

Так что прошу помощи у вас! Заранее спасибо!

Миниатюра 1:

http://hostingkartinok.com/show-image.php?id=552b58b26364f6c718d94de992c9ddd3

Миниатюра 2:

http://hostingkartinok.com/show-image.php?id=dbb9530ca9258ef208ff3b252eefbb10

Edited May 27, 2013 by Diasouls

[Int]

Картинки не открываются, авторизации требуют.

А это нормально, что у тебя только .span_1_of_3?

[Diasouls]

Спасибо, что откликнулись!

Да, картинки то и не подумал, сейчас перезалью на хостинг.

А это нормально, что у тебя только .span_1_of_3?

Да, так как это колонка, которая занимает треть блока, следовательно .span_2_of_3 - это 2/3 блока, может применяться как .span_1_of_3 и .span_2_of_3.

Идею колонок почерпнул из сетки http://www.responsivegridsystem.com/

Edited May 27, 2013 by Diasouls

[Justnewone]

на первй взгляд похоже на http://masonry.desandro.com/

[Diasouls]

на первй взгляд похоже на http://masonry.desandro.com/

Хммм.. а это идея, но опять таки jquery... в принципе, скорее всего, я все равно буду где-то в проекте еще использовать его, так что без JS никак. Вроде и все современные мобильные телефоны нормально с ним работают, так что это вариант. *Самоубеждение*

Все равно же при одноколоночном или двухколоночном "режиме" просмотра, необходимо будет сортировать материала из:

1_2_3

4_5_6

в двухколоночный:

1_2

3_4

5_6

и одноколоночный:

1

2

3

Ну если с версткой ничего не придумаю, то будет как вариант

Спасибо!

Edited May 27, 2013 by Diasouls

[Diasouls]

Всем спасибо за помощь! Решил все таки эту задачку при помощи masonry, на который натолкнул Justnewone.

Переезд, конечно, прошел не без сюрпризов, но терпимо. Из проблем, наверное, стоит отметить, что все блоки наделяются свойствами абсолютного позиционирования и отправляются на свое место с помощью левого и нижнего отступов. Не знаю насколько это практично будет в перспективе, но высота родительского блока уже 4000 пикселей, что немного пугает.

Однако, все, условно говоря - "новости", отсортированы и замечательно выглядят на ретиноподобных дисплеях, телефонах и планшетах. Даже ослик 7 нормально все отобразил. Осталось только исправить адаптивность по ширине и все будет замечательно.

Еще раз спасибо!

[Justnewone]

к месонри можно прицепить подгрузку, то есть, контент будет сначала выводиться только на 1 раскрыв экрана по высоте, а дальше на событие скролла подгружать/показывать дальнейшее

[Diasouls]

Прошу прощения, если вдруг на форуме есть правило: одна тема - один вопрос!

Скажу честно, но за пять с хвостиком лет верстки, я ни разу не пользовался Ajax, так что могу что-то не понимать, но это исправимо.

Как я понял, из примера и документации, чтобы он был бесконечным, мне необходимо хранить в html все миниатюры постов, группируя их по несколько штук и это как мне кажется, очень затратно, если постов больше, допустим, тысячи..

Я думал сделать на ajax'e, который будет подгружать данные по мере прокрутки

Может я ошибаюсь и пора бросить форум и сесть за книги?

[klierik]

Гуглить в сторогу Infinite Scroll