Podes fazer isso da seguinte maneira com jQuery:
$(document).ready(function() {
var divPai = $("#idPai");
if (divPai.height() <= 200) {
divPai.addClass("umaColuna").removeClass("duasColunas");
} else {
divPai.addClass("duasColunas").removeClass("umaColuna");
}
});
Basicamente o que isto vai fazer é:
Se a div id="divPai"
for menor ou igual a 400px
de altura (ou seja lá qual for o valor que queiras que seja o valor máximo definido para a altura da div pai), vai adicionar uma classe chamada umaColuna
ao #divPai
:
<div id="divPai" class="umaColuna">
e se o valor for maior, adiciona uma classe duasColunas
:
<div id="divPai" class="duasColunas">
Depois para fazermos a modificação e transação para dividirmos o conteúdo dentro do #divPai
para que ele fique com uma ou duas colunas dependendo desta mudança de classes acima, basta criarmos o código CSS referente para as classes da seguinte forma:
/* Personaliza o espaçamento entre as colunas */
#idPai {
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 15px;
}
/* Divide o conteúdo dentro da #divPai em uma coluna */
.umaColuna {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
/* Divide o conteúdo dentro da #divPai em duas colunas */
.duasColunas {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.classFilho {
display: inline-block;
width: 100%;
height: 100px;
background-color: #DDD;
margin: 0 2px 15px 2px;
/* O código abaixo evita problemas de posicionamento das divs filhos */
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
E o código HTML será algo como:
<div id="idPai">
<div class="classFilho">0</div>
<div class="classFilho">1</div>
<div class="classFilho">2</div>
<div class="classFilho">3</div>
</div>
Aqui tens um exemplo online no jsFiddle: http://jsfiddle.net/6sqmsLvv/
Clica no botão Adicionar nova div Filho no link do exemplo, para adicionar novas divs
filho.