Adaptable, draggable, filterable Grid layout-muuri

Vista prévia

Descripción

muuri es una biblioteca de JavaScript versátil que le ayuda a crear responsive, arrastrable, filtrable, diseño de cuadrícula de búsqueda con animaciones suaves basadas en < a href = "https://haltu.github.io/muuri/" target = "_ blank" rel = "noopener noreferrer" > Velocity. js .

Install it via package managers:

# Yarn
yarn add muuri

# NPM
$ npm install muuri

# Bower
$ bower install muuri

¿Cómo funciona?

Incluya el archivo principal de JavaScript ' muuri. js ' en la Página Web.

<script src="muuri.min.js"></script>

Incluye el < a href = "https://github.com/hammerjs/hammer.js" target = "_ blank" rel = "noopener noreferrer" > Hammer. js para el soporte de gestos táctiles.

<script src="/path/to/hammer.min.js"></script>

Incluya el < a href = "https://haltu.github.io/muuri/" target = "_ blank" rel = "noopener noreferrer" > Velocity. js para las animaciones suaves mientras arrastra y filtra.

<script src="/path/to/velocity.min.js"></script>

Agregue sus propios elementos de cuadrícula al diseño.

<div class="grid">


<div class="item">


<div class="item-content">



Item 1


</div>

</div>


<div class="item">


<div class="item-content">



Item 2


</div>

</div>


<div class="item">


<div class="item-content">



Item 3


</div>

</div>


...

</div>

Inicializar el diseño de la rejilla:

var grid = new Muuri('.grid');

Aplique sus propios estilos CSS al diseño & elementos de cuadrícula:

.grid { position: relative; }

.item {

display: block;

position: absolute;

width: 100px;

height: 100px;

margin: 5px;

z-index: 1;
}

.item.muuri-dragging, .item.muuri-releasing { z-index: 2; }

.item.muuri-hidden { z-index: 0; }

.item-content {

position: relative;

width: 100%;

height: 100%;
}

Configuración del diseño de cuadrícula con las siguientes opciones.

var grid = new Muuri('.grid',{


// Item elements


items: '*',



// Default show animation


showDuration: 300,


showEasing: 'ease',



// Default hide animation


hideDuration: 300,


hideEasing: 'ease',



// Item's visible/hidden state styles


visibleStyles: {



opacity: '1',



transform: 'scale(1)'


},


hiddenStyles: {



opacity: '0',



transform: 'scale(0.5)'


},



// Layout


layout: {



fillGaps: false,



horizontal: false,



alignRight: false,



alignBottom: false,



rounding: true


},


layoutOnResize: 100,


layoutOnInit: true,


layoutDuration: 300,


layoutEasing: 'ease',



// Sorting


sortData: null,



// Drag & Drop


dragEnabled: false,


dragContainer: null,


dragStartPredicate: {



distance: 0,



delay: 0,



handle: false


},


dragAxis: null,


dragSort: true,


dragSortInterval: 100,


dragSortPredicate: {



threshold: 50,



action: 'move'


},


dragReleaseDuration: 300,


dragReleaseEasing: 'ease',


dragHammerSettings: {



touchAction: 'none'


},



// Classnames


containerClass: 'muuri',


itemClass: 'muuri-item',


itemVisibleClass: 'muuri-item-shown',


itemHiddenClass: 'muuri-item-hidden',


itemPositioningClass: 'muuri-item-positioning',


itemDraggingClass: 'muuri-item-dragging',


itemReleasingClass: 'muuri-item-releasing'
});

Registro de cambios

v0.7.0 (09/27/2018)

• Bugfix