Seções iMasters
CSS

Smart columns com CSS e jQuery

Ao
observar outros “liquid based websites”,
vejo duas técnicas comumente utilizadas na exibição de colunas: colunas de largura fixa e colunas de largura variada. Há inconvenientes nas duas que eu gostaria de
mencionar, e então oferecer
a minha solução
.

Colunas de largura fixa

A melhor coisa em se ter colunas de largura fixa em um layout é que elas vão
preencher o view port com o máximo de
colunas que podem caber dentro dele. Mas, como você pode ver ali, haverá algumas
resoluções do view port, em que elas
vão deixar um espaço branco em excesso onde uma coluna não foi capaz de
caber. 

Colunas de largura variada

Colunas de largura variada não deixam nenhum
espaço branco, e se ajustam perfeitamente dentro de seu layout. O único lado
negativo disso é que ficamos restritos a ter um número fixo de colunas por
linha.

Smart columns com CSS & jQuery

Uma
solução que poderia beneficiar ambas as situações é pegar os dois cenários e os
transformar em um só.

  1. Permita o maior número de colunas de largura fixa a serem alinhadas
    através do view port (quantas
    couberem, baseado no tamanho básico da coluna)
  2. Pegue os espaços brancos em
    excesso e os distribua igualmente para cada coluna para completar uma
    linha. Desse modo, as colunas vão sempre se ajustar perfeitamente.
  3. Mantenha uma largura fixa
    padrão como base, de modo que as colunas estejam razoavelmente dentro do
    tamanho de colunas desejado, enquanto mantêm flexibilidade o suficiente
    para acomodar o view port
    expansível.

HTML

Comece
criando uma lista desordenada que se comportará como colunas.

<ul class="column">
<!--Repeating list item-->
<li>
<div class="block">
<!--Content-->
</div>
</li>
<!--end repeating list item-->
</ul>

CSS

ul.column{
width: 100%;
padding: 0;
margin: 10px 0;
list-style: none;
}
ul.column li {
float: left;
width: 200px; /*Set default width*/
padding: 0;
margin: 5px 0;
display: inline;
}
.block {
height: 355px;
font-size: 1em;
margin-right: 10px; /*Creates the 10px gap between each column*/
padding: 20px;
background: #e3e1d5;
}
.block h2 {
font-size: 1.8em;
}
.block img {
/*Flexible image size with border*/
width: 89%; /*Took 1% off of the width to prevent IE6 bug*/
padding: 5%;
background:#fff;
margin: 0 auto;
display: block;
-ms-interpolation-mode: bicubic; /*prevents image pixelation for IE 6/7 */
}

jQuery

function smartColumns() { //Create a function that calculates the smart columns

//Reset column size to a 100% once view port has been adjusted
$("ul.column").css({ 'width' : "100%"});

var colWrap = $("ul.column").width(); //Get the width of row
var colNum = Math.floor(colWrap / 200); //Find how many columns of 200px can fit per row / then round it down to a whole number
var colFixed = Math.floor(colWrap / colNum); //Get the width of the row and divide it by the number of columns it can fit / then round it down to a whole number. This value will be the exact width of the re-adjusted column

$("ul.column").css({ 'width' : colWrap}); //Set exact width of row in pixels instead of using % - Prevents cross-browser bugs that appear in certain view port resolutions.
$("ul.column li").css({ 'width' : colFixed}); //Set exact width of the re-adjusted column

}

smartColumns();//Execute the function when page loads

$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
smartColumns();
});

Veja
o  Demo – Tente expandir o view port

Conclusão

Estou
planejando utilizar essa técnica no futuro, se alguém tiver outra ideia,
ou usa outras técnicas, não hesite em compartilhar.

?

Texto original disponível em http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/

Comente também

4 Comentários

Eric Platas

Muito bom este artigo, era o que eu precisava para completar uma de interface adaptativa que estou desenvolvendo… Legal mesmo!!!!

Eberton

Muito bom mesmo, estava procurando essa solução e nunca achava.

Parabens pelo artigo, muito bem explicado, jah seguia seu trabalho a um tempo(designbombs etc), não sabia que éra brasileiro… Bom ver seus artigos no imasters.

Abraços.

Guilherme Ferrolli

Bom, de uma maneira controversa atualmente, porém ,de maneira nenhuma, errada ou ruim , eu diria que a melhor solução é uma table. Sem mais explicações e sem entrar na questão da semântica, afinal todos sabemos como funciona uma table.

christian

vc é o kra!! paguei um pau no seu site sohtanaka.com muito bem feito cores e trabalhos perfeitos!! manja muito, se puder me add… gamesmame@hotmail.com MSN… abraço!!

Qual a sua opinião?