Ecualizar la altura de las columnas por grupo-Matchbox

Vista prévia

Descripción

Matchbox es una biblioteca de JavaScript de igual altura que se utiliza para hacer que un conjunto de contenedores HTML coincidentes tenga la misma altura que usted puede especificar el tamaño de los grupos que se van a procesar para las coincidencias.

Funcionamiento

En primer lugar, debe cargar la biblioteca JavaScript de Matchbox en el documento HTML.

<script src="matchbox.js"></script>

Se supone que tiene un conjunto de cajas de la siguiente manera:

<div class="group-one js-box-one">

<div class="item-1 js-match"></div>

<div class="item-2 js-match"></div>

<div class="item-3 js-match"></div>

<div class="item-4 js-match"></div>

<div class="item-5 js-match"></div>

<div class="item-6 js-match"></div>

<div class="item-7 js-match"></div>

<div class="item-8 js-match"></div>

<div class="item-9 js-match"></div>

<div class="item-10 js-match"></div>
</div>

Cree un nuevo Matchbox y especifique el contenedor principal como sigue:

var myMatchbox = new Matchbox({


parentSelector: '.js-box-one'
});

Inicializar el Matchbox.

myMatchbox.init();

Especifique el tamaño de los grupos que se procesan para las coincidencias.

var myMatchbox = new Matchbox({


parentSelector: '.js-box-one',


groupsOf: 5
});

Más opciones de configuración con valores predeterminados.

// class name set on body on init
initClass: 'js-matchbox-initialized',

// CSS selectors
parentSelector: '.js-box',
childSelector: '.js-match',

// Size of groups to process for matches
groupsOf: 2,

// Array of objects; each object must have a bp and a groupsOf property.
breakpoints: []