Sample Masonry Layout in a Mobile App (Cordova/AngularJS/Ionic)

May 22, 2014By 2 Comments

masonryIf you’re looking for a fun useful layout library for your mobile apps then you should check out the Masonry grid system library. This layout is what is used on the Pinterest site, as well as many others you’ve probably come across daily and just may not have been aware that a special layout technique was done to achieve the ‘brick-like’ effect.

If you’re not familiar with this layout style, think of it like a brick wall with differing sized bricks.

A good explanation of Masonry and why to use it can be found at this link, but I wanted to share a direct quote from the article here:


Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.

Also, this picture really helps illustrate how it works:

masonry-desc

Sample App

I recently tried it out with my own Media Explorer mobile app that I’ve blogged about before and wanted to share the sample and result. Since I wrote the app using AngularJS/Ionic originally, I decided to see if there was a masonry AngularJS directive available anywhere and found one here that worked well.

The best way to see the effect is to try it yourself so I’ve embedded my sample app below. Start clicking the buttons to add and remove items or refresh the page to see it lay out initially.

This is kind of a silly example, but it does show the effect of the layout and how the different sized images are positioned to make the most use of the given space with the options I’ve set for columnWidth and gutter (see below). If you reload the page while the embedded app is visible you will see the initial layout effect, as well as when items are added and removed with the buttons. The layout will shift and redistribute items with space depending on the size of the images available. Pretty sweet!

Also, try it out full screen here and adjust the browser window width to see how it adjusts accordingly.

Implementing Masonry

To implement the Masonry layout with the AngularJS directive, you can follow the instructions from the
github site, or just ensure you have included the necessary dependencies and performed the steps shown below. I downloaded the minified packaged versions for the masonry and imagesLoaded libraries from their respective sites and then included the angular-masonry.js directive code from their github site. Of course you will need the AngularJS and Ionic framework libraries as well, but those were already included in my previous version so I’m just covering what I added for this support to work.

  1. Add the wu.masonry module to the app.js file:
    var mediaApp = angular.module('mediaApp', ['ionic','wu.masonry','ngResource'])
    
  2. Add the required dependencies to the index.html:
  3. <!-- this include first before any other js libraries -->
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    ...
    <!-- these includes last -->
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/masonry.pkgd.min.js"></script>
    <script src="js/angular-masonry.js" type="text/javascript"></script>
    
  4. Implement the masonry directive. There are a couple of ways you can implement it, the details of those different ways and the options you can set can be found at the github site for the directive.
  5.  <div class="pad-sides" masonry="{columnWidth: 100, gutter: 5, transitionDuration: '.9s', hiddenStyle: {opacity: .001, transform: 'scale(0.01)', transform: 'rotate(200deg)'}, visibleStyle: {opacity: 1, transform: 'rotate(200deg)'}}">
        <div class="masonry-brick" ng-repeat="singer in singers">
           <img ng-src="{{ singer }}" alt="a singer">
        </div>
    </div>
    
    Don’t forget to include the masonry-brick CSS class name where you specify the items to repeat. This is how the items are registered for the masonry directive.
    You can see the options I chose to set on the masonry directive for columnWidth and a bunch of others. You could also specify any other options found on the main Masonry library site. For instance, I included the hiddenStyle and visibleStyle overrides to cause the rotation effect.
  6. Lastly, here’s the code I used to populate the singer images for my sample masonry layout items in my HomeCtrl. The add and remove functions are called from the add/remove buttons in the home.html page:
  7. $scope.singers = ['img/shakira.jpg','img/justin.jpg','img/selena.jpg','img/adam.jpg'];
    
    var moreImgs = ['img/ariana.jpg', 'img/ed.jpg', 'img/harry.jpg','img/alicia.jpg', 'img/jennifer.jpg','img/blake.jpg','img/pink.jpg','img/bruno.jpg','img/christina.jpg','img/jason.jpg',
    'img/pitbull.jpg','img/katy.jpg','img/iggy.jpg'];
    
    $scope.add = function add(name) {
        if (moreImgs.length>0)
            $scope.singers.push(moreImgs.pop());
        else {
            moreImgs.push($scope.singers.splice(0,1)[0]);
        }
    }
    
    $scope.remove = function remove() {
        var num = ~~(Math.random() * $scope.singers.length);
        moreImgs.push($scope.singers[num]);
        $scope.singers.splice(num,1)[0];
    };
    

    Filed in: AndroidAngularJS sample applicationCordovaionicMobile DevelopmentPhoneGap Tags:

About the Author ()

Comments (2)

Trackback URL | Comments RSS Feed

  1. Piet Crombach says:

    Great job. I gonna love Ionic and Angular more and more.
    Wouldn’t it be perfect if the width of the images adopted to the column?

  2. joven says:

    Very nice I like the media explorer (:

Leave a Reply