1

У меня есть такая лента: Двухколонная лента

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

.t {
  width: 48%;
  margin: 1%;
  background: #d3d3d3;
  float: left;
}

.t:nth-child(2n) {
  float: right;
}

.t1 {height:50px}
.t2 {height:300px}
.t3 {height:200px}
.t4 {height:90px}
.t5 {height:80px}
.t6 {height:30px}
<div class="t t1"></div>
<div class="t t2"></div>
<div class="t t3"></div>
<div class="t t4"></div>
<div class="t t5"></div>
<div class="t t6"></div>

Есть какие нибудь идеи или решения?

Можно использовать все что указал в метках:

1 ответ 1

1

Вот вам идея: после загрузки страницы считайте высоту каждого блока и кладите его в колонку, выстоа которой на данный момент наименьшая. Верхние границы блоков будут располагаться в строгом хронологическом порядке (при условии, что на страницу они попали именно в таком порядке). Таким способом можно сгенерировать "ленту" с любым количеством колонок.

HTML:

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

<div class="block">1</div>
<div class="block">2</div>
...
<div class="block">n</div>

JS:

var columns = document.querySelectorAll('.column');
var blocks = document.querySelectorAll('.block');
for (var i = 0; i < blocks.length; i++) {
    var block = blocks[i];
    var minColumn = columns[0];
    var minHeight = minColumn.offsetHeight;
    for (var j = 0; j < columns.length; j++) {
        if (columns[j].offsetHeight < minHeight) {
            minColumn = columns[j];
            minHeight = columns[j].offsetHeight;
        }

        minColumn.appendChild(block);
    }
}

https://jsfiddle.net/Lfty8uot/

Приведённый код - лишь proof of concept, и не учитывает некоторые ситуации. Например, если при загрузке страницы блоки будут невидимыми, offsetHeight у всех них будет 0, и они все попадут в одну колонку. Или, если высота блоков меняется во время загрузки (медленная подгрузка картинок), порядок будет нарушен.

1
  • Сейчас буду довольствоваться и этим. Спасибо 18 мар 2016 в 17:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.