ng-packery
Version:
AngularJS Directive for Packery Layout
79 lines (77 loc) • 3.4 kB
HTML
<html lang="en" data-ng-app="ngPackery">
<head>
<base href="\">
<meta charset="UTF-8">
<title>Title</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
packery {
display: block;
}
packery-item {
/*width: 200px;*/
background: #333;
color: #fff;
margin: 5px;
}
</style>
</head>
<body data-ng-view>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>AngularJS Packery Test</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div data-ng-view>
<packery data-packery-options='{"columnWidth": 200}'>
<packery-item data-ng-repeat="n in [42, 42, 43, 43] track by $index">
{{n}} Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem consequuntur
cumque expedita
facere fugit in iusto minus nesciunt nihil nisi odit officia omnis quae repellat repudiandae
tempora, totam
veritatis!
</packery-item>
<packery-item ng-repeat="n in [1, 2, 3, 4] track by $index">
{{n}}
</packery-item>
<packery-item class="testing1">
<div ng-repeat="n in [5, 6, 7, 8] track by $index">
{{n}}
</div>
</packery-item>
<div class="testing2">
<div class="testing3">
<packery-item ng-repeat="n in [9, 10, 11, 12] track by $index">
{{n}}
</packery-item>
</div>
</div>
<packery-item>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cupiditate deserunt
eligendi
eos
error, ex facere fugit id laboriosam minus necessitatibus nesciunt officiis perferendis
perspiciatis,
praesentium recusandae veniam vitae voluptatem?
</packery-item>
<packery-item>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cupiditate deserunt
eligendi
eos
error, ex facere fugit id laboriosam minus necessitatibus nesciunt officiis perferendis
perspiciatis,
praesentium recusandae veniam vitae voluptatem?
</packery-item>
</packery>
</div>
</div>
</div>
</div>
<script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><\/script>')</script>
<script>window.angular || document.write('<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"><\/script>')</script>
<script>window.Packery || document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/packery/1.4.3/packery.pkgd.js"><\/script>')</script>
<script src="angular-packery.js"></script>
</body>
</html>