Biblioteca de diseño de rejilla ligera-como de albañilería-Bricklayer

Vista prévia

Descripción

Bricklayer es una biblioteca de JavaScript para generar un diseño de cuadrícula en cascada adaptable, dinámico, de albañilería y Pinterest para su proyecto Web.

Funcionamiento

Después de descargar la biblioteca JavaScript de Bricklayer, simplemente incluya los archivos CSS y JS justo encima de la etiqueta del cuerpo de cierre:

<link rel="stylesheet" href="dist/bricklayer.css">
<script src="dist/bricklayer.js"></script>

Envuelva los elementos de rejilla en un contenedor con la clase CSS de ' Bricklayer '.

<section class="bricklayer">

<!-- item here -->
</section>

Inicializar el diseño de cuadrícula.

var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))

Anexar nuevo elemento (s) al diseño de cuadrícula.

bricklayer.append(

"<div>New Item</div>"
)

bricklayer.prepend([

"<div>New Item 1</div>",

"<div>New Item 2</div>",

"<div>New Item 3</div>"
])

Eventos de API.

// "itemElement" will be appended to the end of "columnElement"
bricklayer.on('beforeAppend', function (e) {

var itemElement = e.detail.item

var columnElement = e.detail.column
})

// "itemElement" will be prepended to the top of "columnElement"
bricklayer.on('beforePrepend', function (e) {

var itemElement = e.detail.item

var columnElement = e.detail.column


})

// "itemElement" is appended to the end of "columnElement"
bricklayer.on('afterAppend', function (e) {

var itemElement = e.detail.item

var columnElement = e.detail.column
})

// "itemElement" is prepended to the top of "columnElement"
bricklayer.on('afterPrepend', function (e) {

var itemElement = e.detail.item

var columnElement = e.detail.column
})

// In every breakpoint, this event will be fired with the count of columns
bricklayer.on('breakpoint', function (e) {

var columnCount = e.detail.columnCount
})

Registro de cambios

08/16/2018

• Agregue la comprobación de tipos para la propiedad CustomEvent