Блог

Главная - Вопросы по программированию - Я пытаюсь получить неравномерные столбцы

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

#css

#css

Вопрос:

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

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

В следующем коде я бы хотел, чтобы поле, содержащее строки 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>

Комментарии:

1. Вы могли бы использовать jQuery Masonry: masonry.desandro.com

Ответ №1:

Этот эффект может быть достигнут с помощью небольшого 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  ;
});