Я пытаюсь получить неровные столбцы

Я пытаюсь заставить динамические столбцы заполнить все пространство, чтобы оно не действовало как таблица и было более ликвидным.

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

В следующем коде я бы хотел, чтобы поле, содержащее строки 8 и 9, находилось непосредственно под полем со строкой 1 без вертикального пробела. Блоки динамические, поэтому я не знаю, сколько строк будет в каждом блоке.

Спасибо.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float</title>
<style>
.b1 {
    width:300px;
    border: thin solid #C30;
    margin:0;
    padding:0;  
}
.b2 {
    margin:0;
    padding:0;
    border: thin solid #00F;
    float:left;
}
.line {
    list-style-type: none;
    width:90px;
    margin:0;
    padding:0;
}
</style>
</head>
<body>
<div class="b1">
    <div class="b2">
        <li class="line">line 1</li>
    </div>

    <div class="b2">
        <li class="line">line 2</li>
        <li class="line">line 3</li>
        <li class="line">line 4</li>
    </div>

    <div class="b2">
        <li class="line">line 5</li>
        <li class="line">line 6</li>
    </div>
    <div class="b2">
        <li class="line">line 7</li>
    </div>

    <div class="b2">
        <li class="line">line 8</li>
        <li class="line">line 9</li>
    </div>
</div>
</body></html>

css
person David    schedule 04.10.2011    source источник
comment
Вы можете использовать jQuery Masonry: masonry.desandro.com   -  person Michelle    schedule 05.10.2011

Ответы (1)


arrow_upward
0
arrow_downward

Такого эффекта можно добиться с помощью небольшого количества JavaScript/jQuery:

var coords = new Array();
var i = 0;
$('.b2').each(function()
{
    var t = this.offsetTop;
    var l = this.offsetLeft;
    var w = this.offsetWidth;
    var h = this.offsetHeight;
    var arr = new Object({'t': t, 'l': l, 'w': w, 'h': h});
    coords.push(arr);
    if (i > 0)
    {
        for (var j=0; j<i; j++)
        {
            if (coords[j].l == l)
            {
                var ofs = t - (coords[j].t + coords[j].h);
                this.style.marginTop = '-'+ofs+'px';
            } 
        }
    }
    i++;
});
person Aaron    schedule 02.12.2011