Sistema de cuadrícula dinámica adaptable al estilo de Pinterest con JavaScript puro-Colm. js

Vista prévia

Descripción

Colm. js es una biblioteca de JavaScript ligera & independiente que organiza dinámicamente una colección de elementos en un diseño de cuadrícula adaptable similar a Pinterest o albañilería.

Funcionamiento

Cargue la última versión de Colm. js en el documento.

<script src="build/colm.x.js"></script>

Cree una rejilla de columnas como sigue. Puede pasar las opciones al diseño de cuadrícula a través de atributos de datos * de HTML5.

• Data-Colm-width = "160 ″ : el ancho de los elementos
• Data-Colm-min-width = "140 ″ : minimux ancho de los elementos
• Data-Colm-align-columnas = "stretch" : izquierda, derecha, centrar, justificar, espaciar o estirar
• datos-Colm-alinear-items = "estirar" : arriba, abajo, centro, justificar, espacio o estirar
• Data-Colm-Place = "Column" : forzar elementos secundarios en una columna determinada. Utilice números negativos para contar desde la derecha.

<div

 id="colm1"

class="colm"

data-colm-width="160"

data-colm-min-width="140"

data-colm-align-columns="stretch"

data-colm-align-items="stretch"
>

<article>


<section>



<h2>1</h2>



Content 1


</section>

</article>

<article>


<section>



<h2>2</h2>



Content 2


</section>

</article>

<article>


<section>



<h2>3</h2>



Content 3


</section>

</article>

...
</div>
</div>

Uso avanzado.

// Used to programmatically trigger layouting on the page.
 // This is automatically called on page load and resize.
colm()

// Add new children to a container.
 // Content can be a single element, an array or node list of elements or an HTML string.
colm.appendTo(selector,content)