# 入门用法

# 1、筛选过滤

（官网例子:https://codepen.io/desandro/pen/mjcGq）

html

	<h1>Packery demo - Draggabilly with appended items</h1>
	<div class="packery">
	<div class="item w4 h2"></div>
	<div class="item w2 h2"></div>
	<div class="item w2 h4"></div>
	<div class="item w2 h2"></div>
	<div class="item w4 h4"></div>
	<div class="item w2 h2"></div>
	<div class="item w2 h4"></div>
	<div class="item w4 h4"></div>
	<div class="item w2 h2"></div>
	<div class="item w2 h2"></div>
	</div>

	<p><button id="add-items">Add more items</button>

css

	* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	body { font-family: sans-serif; }

	.packery {
	background: #FDD;
	background: hsla(45, 100%, 40%, 0.2);
	max-width: 520px;
	}

	/* clearfix */
	.packery:after {
	content: ' ';
	display: block;
	clear: both;
	}

	.item {
	width: 40px;
	height: 40px;
	float: left;
	background: #C09;
	border: 4px solid #333;
	border-color: hsla(0, 0%, 0%, 0.3);
	}

	.item:hover {
	border-color: white;
	cursor: move;
	}

	.item.w2 { width: 80px; background: #9C0; }
	.item.h2 { height: 80px; background: #0C9; }
	.item.h4 { height: 160px; background: #C90; }
	.item.w4 { width: 160px; background: #90C; }

	.item.is-dragging,
	.item.is-positioning-post-drag {
	border-color: white;
	background: #09F;
	z-index: 2;
	}

	button {
	font-size: 20px;
	}

javascript

	// https://packery.metafizzy.co/packery.pkgd.js and
	// https://draggabilly.desandro.com/draggabilly.pkgd.js added as external resource

	var $container = $('.packery');

	$container.packery({
	columnWidth: 80,
	rowHeight: 80
	});

	// bind draggabilly events to item elements
	$container.find('.item').each( makeEachDraggable );

	function makeEachDraggable( i, itemElem ) {
	// make element draggable with Draggabilly
	var draggie = new Draggabilly( itemElem );
	// bind Draggabilly events to Packery
	$container.packery( 'bindDraggabillyEvents', draggie );
	}

	// add more items
	$('#add-items').click( function() {
	var items = '<div class="item w2 h2"></div>' +
	'<div class="item w2 h2"></div>' +
	'<div class="item w4 h2"></div>' +
	'<div class="item h4 w4"></div>' +
	'<div class="item w2 h2"></div>' +
	'<div class="item w2 h4"></div>' +
	'<div class="item w2 h2"></div>';
	var $items = $(items);
	// add to packery layout
	$container.append( $items )
	.packery( 'appended', $items )
	// make item elements draggable
	$items.each( makeEachDraggable );
	});