Динамические столбцы/строки

Question

Wondering - знает кто-нибудь о хороших статьях, объясняющих технику CSS, позволяющую нескольким экземплярам класса течь по странице относительно элементов, находящихся над ней. Не объяснять это так хорошо.

Veerle 'Pierter's делает это на этой странице: http://veerle.duoh.com/belgiangraphicdesign Хотя я не уверен, что хочу использовать технику, такую ​​как ее, которая требует ввода высоты на элемент через ее установку EE.

Я сделал небольшое изображение того, что я пытаюсь добиться;

Ключ. Мне нужен надежный метод для этого. Что-то, где разметка может быть такой же простой, как;

<div class="box"> 
    Number 1 
</div> 
<div class="box"> 
    Number 2 
</div> 
<div class="box"> 
    Number 3 
</div> 
<div class="box"> 
    Number 4 
</div> 
<div class="box"> 
    Number 5 
</div> 
... 

Любил бы любые указатели в правильном направлении.

Answer 1

Она не устанавливает высоту для этих коробок.

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

Если вы не хотите использовать javascript-решение, единственный способ сделать это - иметь колонки-обертки, но это сильно изменит вашу разметку.

<div class="container"> 
    <div class="box">number 1</div> 
    <div class="box">number 2</div> 
    <div class="box">number 3</div> 
</div> 
<div class="container"> 
    <div class="box">number 4</div> 
    <div class="box">number 5</div> 
    <div class="box">number 6</div> 
</div> 
<div class="container"> 
    <div class="box">number 7</div> 
    <div class="box">number 8</div> 
    <div class="box">number 9</div> 
</div> 

Answer 2

Она достигает этого, полностью позиционируя коробки.

Но вы можете достичь этого с помощью очень простого css, предполагая, что вы можете контролировать порядок отображения элементов.
Вы должны группировать их в столбцах (а не в строках, как обычно), но это работает как шарм.

Использование HTML как это:

<span class="column"> 
    <div class="box">number 1<br />with two lines</div> 
    <div class="box">number 4</div> 
    <div class="box">number 7<br />with two lines</div> 
</span> 
<span class="column"> 
    <div class="box">number 2</div> 
    <div class="box">number 5<br />with two lines<br />or even three<br />or four!</div> 
    <div class="box">number 8</div> 
</span> 
<span class="column"> 
    <div class="box">number 3</div> 
    <div class="box">number 6</div> 
    <div class="box">number 9</div> 
</span> 

И CSS так:

.column { 
    clear: left; 
    width: 25%; 
    display: inline-block; 
    vertical-align: top; 
} 
.box { 
    border: solid 1px blue; 
} 

испытания его на JSFiddle.net.
Для столбцов используйте span, потому что IE7 не принимает display: inline-block; для элементов, которые являются естественно блочными элементами. (Мех.)

Answer 3

Как указывали другие, используя только CSS, вы можете группировать ящики в столбцы. К сожалению, это не будет выглядеть хорошо, если ваш контент будет динамичным, и вы не знаете высот всех ящиков (ваши столбцы могут иметь совершенно разные длины). Если вы хотите рассчитать высоту ящиков, чтобы удобно их расположить, вам придется использовать Javascript. Конечно, нет ничего плохого в использовании Javascript - это правильный инструмент для этой работы!

Что касается реализации, логика будет выглядеть примерно так: сначала добавьте первые 4 окна, один в верхней части каждого столбца. Затем отслеживайте общую высоту каждого столбца, используя свойство clientHeight Javascript, и для каждого нового поля, которое вы хотите добавить; просто добавьте его в конец кратчайшего столбца с appendChild().

Если вы решите пойти с jQuery, я могу порекомендовать плагин под названием jQuery Masonry.