RibosoMatic

jQuery Masonry es un plugin que nos permite organizar los elementos-hijos flotantes de un elemento principal CSS. Tiene una forma peculiar de ordenar, pues es como si se pusiera ladrillo por ladrillo en la construcción de un muro, tal como se observa en la imagen siguiente.

El orden lo realiza tomando en cuenta las caracteristicas de cada elemento hijo como: el contenido, el alto y ancho. Masonry trabaja con elementos hijos: <div>, <li>, <p>, <span>. Bastará con descargar el plugin y llamar al metodo correspondiente:

$('.wrap').masonry();

En código para el ejemplo A y B (mostrado en la imagen anterior) es el siguiente:

HTML

<div id="masonry-ex-a">
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>
<ol id="masonry-ex-b">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ol>

CSS

#masonry-ex-a p {
  width:58px; // el mismo ancho para todos
  margin: 1px;
  float: left;
}
#masonry-ex-b li {
  width:88px;
  margin: 3px;
  border: 3px solid #AAA;
  float: left;
}