github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/js/masonry/demo.js (about)

     1  
     2  $(function(){
     3    var TILE_IDS = [
     4      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
     5      15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25
     6    ];
     7    var rows;
     8    var rows_lg = [
     9      " A A B . . . ",
    10      " A A B . . C ",
    11      " . . . . D C ",
    12      " E E F F D . ",
    13      " . . F F . . ",
    14      " . G G . . . "
    15    ];
    16    var rows_sm = [
    17      " A A B . . ",
    18      " A A B . . ",
    19      " . C . . . ",
    20      " . C D E E ",
    21      " F F D . . ",
    22      " F F . . . ",
    23      " . G G . . ",
    24      " . . . . . "
    25    ];
    26    var rows_xs = [
    27      " A A B ",
    28      " A A B ",
    29      " . . . ",
    30      " . . C ",
    31      " . . C ",
    32      " . . D ",
    33      " E E D ",
    34      " F F . ",
    35      " F F . ",
    36      " . . . ",
    37      " . G G ",
    38      " . . . "
    39    ];
    40  
    41    var el = $('#masonry'),
    42    grid = new Tiles.Grid(el);
    43    grid.cellPadding = 0;
    44    grid.animationDuration = 0;
    45  
    46    grid.resizeColumns = function() {
    47        return this.template.numCols;
    48    };
    49    grid.numCols = function() {
    50        return this.template.numRows;
    51    };
    52  
    53    grid.createTile = function(tileId) {
    54        var tile = new Tiles.Tile(tileId);
    55        tile.$el.attr('tile-id', tileId).addClass('pos-abt').append($( " > .item:first", el ));
    56        return tile;
    57    };
    58  
    59    // get the rows json for different screen
    60    var $window = $(window);
    61    var getRows = function(){
    62      var $rows;
    63      $window.width() < 768 && ($rows = rows_xs);
    64      $window.width() >= 768 && ($rows = rows_sm);
    65      $window.width() >= 992 && ($rows = rows_lg);
    66      return $rows;
    67    };
    68  
    69    grid.template = Tiles.Template.fromJSON(getRows());
    70    grid.isDirty = true;
    71    grid.resize();
    72  
    73    var ids = TILE_IDS.slice(0, grid.template.rects.length);
    74    grid.updateTiles(ids);
    75    grid.redraw(true);
    76  
    77    // set height on mobile
    78    var setHeight = function(){
    79      el.height('auto');
    80      $window.width() < 768 && el.height(grid.cellSize * grid.template.numRows);
    81    }
    82    setHeight();
    83  
    84    // resize the window
    85    var $resize, $width = $window.width();
    86    $window.resize(function() {
    87      if($width !== $window.width()){
    88        clearTimeout($resize);
    89        $resize = setTimeout(function(){      
    90          grid.template = Tiles.Template.fromJSON(getRows());
    91          grid.resize();
    92          grid.redraw(true);
    93          setHeight();
    94          $width = $window.width();
    95        }, 200);
    96      }
    97    });
    98  
    99  });