AngularJS Example:

by sqiudward

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://passy.github.io/angular-masonry/angular-masonry.js"></script>

<div ng-app="app">
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    
    
    <div class="row" style="margin-top: 15px;">
      <div class="col-sm-12" style="height:400px; overflow:scroll">

        <div class="qdi-cache-box" ng-repeat="cache in vm.caches">
          <span class="pull-left">
            <i class="fa fa-archive fa-lg ng-binding"></i>
            {{$index + 1}}
          </span>

          <span class="pull-right">
            <i class="btn btn-danger fa fa-lg fa-retweet"></i>
          </span>


          <br>
          <br>

          <div class="text-center">
            <span class="text-center">
              <b>Name</b> <br>
              <small class="ng-binding">{{cache.name}}</small>
            </span>

            <br>
            <br>

            <span class="text-center">
              <b>Model</b> <br>
              <small class="ng-binding">{{cache.model}}</small> (hrs)
            </span>

            <br>
            <br>


          </div>

        
        
        </div>

      </div>
    
  </div>

  </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */


body {
    margin: 30px;
    width: 1000px;
    height: 200px;
}

.qdi-cache-box {
    background-color: #e8e8e8;
    border-radius: 20px;
    padding: 13px;
    width: 180px;
    height: 168px;
}

.qdi-cache-box:hover {
    transform: translateY(-5px) translateX(-5px);
    background: #e6e6e6;
    box-shadow: 4px 4px 4px #888888;
    z-index: 1050;
}

JavaScript

var app = angular.module("app", ['a8m.chunk-by', 'wu.masonry']);

function TodoCtrl($scope) {
  $scope.vm = {};
    $scope.vm.caches = [{
      name: "Samsung",
      model: "S8"
    },
    {
      name: "Samsung",
      model: "S9"
    },{
      name: "Iphone",
      model: "X"
    },
    {
      name: "Iphone",
      model: "6"
    },
    {
      name: "Samsung",
      model: "S8"
    },
    {
      name: "Samsung",
      model: "S9"
    },{
      name: "Iphone",
      model: "X"
    },
    {
      name: "Iphone",
      model: "6"
    }];
  
}


angular.module('a8m.filter-watcher', [])
  .provider('filterWatcher', function() {

    this.$get = ['$window', '$rootScope', function($window, $rootScope) {

      /**
       * Cache storing
       * @type {Object}
       */
      var $$cache = {};

      /**
       * Scope listeners container
       * scope.$destroy => remove all cache keys
       * bind to current scope.
       * @type {Object}
       */
      var $$listeners = {};

      /**
       * $timeout without triggering the digest cycle
       * @type {function}
       */
      var $$timeout = $window.setTimeout;

      /**
       * @description
       * get `HashKey` string based on the given arguments.
       * @param fName
       * @param args
       * @returns {string}
       */
      function getHashKey(fName, args) {
        function replacerFactory() {
          var cache = [];
          return function(key, val) {
            if(_.isObject(val) && !_.isNull(val)) {
              if (~cache.indexOf(val)) return '[Circular]';
              cache.push(val)
            }
            if($window == val) return '$WINDOW';
            if($window.document == val) return '$DOCUMENT';
            if(angular.isDefined(val)) return '$SCOPE';
            return val;
          }
        }
        return [fName, JSON.stringify(args, replacerFactory())]
          .join('#')
          .replace(/"/g,'');
      }

      /**
       * @description
       * fir on...