angular-justified-layout

angularjs wrapper for flickr justified layout

It's very simple to use!

There is only one directive called justified-layout you must pass to it an attribute called items which will be an array of rateo values or objects containing width and height, as described in: flickr/justified-layout

It can be used iwth an array of aspect rateos that will be converted into objects to use in the template:

 <justified-layout items="[1, 1.5 ,0.5, 1.2, 1]"></justified-layout>

Or directly with an array of objects:

 <justified-layout items="myArray"></justified-layout>

Note, if you want to use the array of objects option, each object inside myArray must contain theese properties:

width: The element (image, box, whatever) real width
height: The element (image, box, whatever) real height

Default template:

With a few lines of style and this module, this is what you get.

Custom template

As you can see, you can use a custom template for your justified-layout, is also super easy to do it!

The directive will accept transcluded content, if you want to access the directive scope, as per example, the items data, just call $parent.items in your template and you will have access to them!

Many thanks to Flickr for the aweome script!

All this has been made possible thanks to Flickr who has shared its magic code! If you are insterested visit this page.