[Resolvido] Smart columns com CSS e jQuery

[RSS iMasters 5]

Aoobservar 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 demencionar, e então oferecera minha solução.

Colunas de largura fixa

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

Colunas de largura variada

Colunas de largura variada não deixam nenhumespaço branco, e se ajustam perfeitamente dentro de seu layout. O único ladonegativo disso é que ficamos restritos a ter um número fixo de colunas porlinha.

Smart columns com CSS & jQuery

Umasolução que poderia beneficiar ambas as situações é pegar os dois cenários e ostransformar 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

Comececriando 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();

});

Vejao  Demo ? Tente expandir o view port

Conclusão

Estouplanejando 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/

 

http://imasters.com.br/artigo/21694/css/smart-columns-com-css-e-jquery