Masonry Layout | Data Views | MESCIUS DataViewsJS Angular Demos

This example demonstrates the DataViews Masonry Layout Engine, which places elements in optimal position based on vertical space. This is also referred to as Pinterest and metro. The data source for this example is a two column table; one for the image and another for the description. Each row is a card in the layout. To create a similar layout, initialize the MasonryLayout object like so: Note the gutter and rowtemplate options. Gutter sets the space between cards and rowtemplate refers to the <template> element that formats the cards.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/DataViews/Masonry/MasonryLayout/angular/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="masonry, pinterest, pinterest like" />
<meta
name="description"
content="This example demonstrates the DataViews Masonry Layout Engine, which places elements in optimal position based on vertical space."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Masonry Layout | Data Views | MESCIUS DataViewsJS Angular Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.masonry.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/angular-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'angular',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/systemjs/dist/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<template id="rowTemplate" style="display: none">
<div class="img-board">
<table>
<tr>
<td>
<div data-column="image"></div>
</td>
</tr>
<tr>
<td>
<div data-column="meta" class="meta"></div>
</td>
</tr>
</table>
</div>
</template>
<app-root></app-root>
<script type="text/javascript">
System.import('./app.ts');
</script>
</body>
</html>

import { Component } from '@angular/core';
import MasonryLayout from '@grapecity/dataviews.masonry';
import { data } from './data';
const cols = [
{
id: 'image',
dataField: 'image',
presenter: '<img src="{{=it.image}}" alt="dogs"/>',
},
{
id: 'meta',
dataField: 'meta',
},
];
const layout = new MasonryLayout({
gutter: 12,
rowTemplate: '#rowTemplate',
});
@Component({
selector: 'app-root',
template: `
<gc-dataview id="grid" class="grid" [data]="data" [cols]="cols" [layout]="layout" autoFocus></gc-dataview>
`,
})
export class AppComponent {
data = data;
cols = cols;
layout = layout;
}

import { NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { DataViewModule } from '@grapecity/dataviews.angular';
// zone.js should be loaded last to fix error 'ZoneAwarePromise has been overwritten'
import 'zone.js';
@NgModule({
declarations: [AppComponent],
imports: [DataViewModule, BrowserModule, FormsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
if (process.env.NODE_ENV === 'production') {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));

// pinterest dogs
const SITE_ROOT = window.process.env.SITE_ROOT;
export const data = [
{
image: SITE_ROOT + '/images/pinterestDogs001.jpg',
meta:
'This girl who feels the need to KILL. OUR. SOULS with her lil’ puppy stare. | 17 Puppies Who Are So Cute They Will Make You Mad',
},
{
image: SITE_ROOT + '/images/pinterestDogs002.jpg',
meta: '"What\'s Instagram?" | Cavalier King Charles Spaniel Puppies Are The Cutest Puppies To Ever Puppy',
},
{
image: SITE_ROOT + '/images/pinterestDogs003.jpg',
meta: '10 Most Popular Myths about Dogs | The Planet of Pets',
},
{
image: SITE_ROOT + '/images/pinterestDogs004.jpg',
meta: 'Cute puppy OMG',
},
{
image: SITE_ROOT + '/images/pinterestDogs005.jpg',
meta:
'“Don’t worry! I’ll guard the car while the big dogs catch the bad guy.” | 18 Adorable Puppies On Their First Day Of Work',
},
{
image: SITE_ROOT + '/images/pinterestDogs006.jpg',
meta: 'Batdog [ Actually a Cane Corso, an Italian mastiff breed ]',
},
{
image: SITE_ROOT + '/images/pinterestDogs007.jpg',
meta: 'absolutely adorable... french bulldog puppy Limited Edition French Bulldog Tee teespring.com/...',
},
{
image: SITE_ROOT + '/images/pinterestDogs008.jpg',
meta: 'These proud parents. | 42 Adorable Things To Take Your Mind Off The World Imploding',
},
{
image: SITE_ROOT + '/images/pinterestDogs009.jpg',
meta: '"I don\'t really know what I\'m doing but IT FEELS A LOT LIKE HAVING FUN."',
},
{
image: SITE_ROOT + '/images/pinterestDogs010.jpg',
meta: "21 Dogs Who Don't Realize How Big They Are. muahahaha",
},
{
image: SITE_ROOT + '/images/pinterestDogs011.jpg',
meta:
'This awkward first kiss is so cute, be calm and look at this awkward kiss! | 31 Cute Animals To Look At Instead Of Studying',
},
{
image: SITE_ROOT + '/images/pinterestDogs012.jpg',
meta: 'Being this cute can be exhausting: | 20 Puppies Cuddling With Their Stuffed Animals During Nap Time',
},
{
image: SITE_ROOT + '/images/pinterestDogs013.jpg',
meta: 'The tiny police puppy who’s still too small for his vest. | The 21 Most Adorable Puppies Of 2014',
},
{
image: SITE_ROOT + '/images/pinterestDogs014.jpg',
meta:
'"I felt my lungs inflate with the onrush of scenery—air, mountains, trees, people. I thought, \'This is what it is to be happy.\'" -Sylvia Plath',
},
{
image: SITE_ROOT + '/images/pinterestDogs015.jpg',
meta: 'And this teeny tiny adventurer who is an ACTUAL teddy bear. | 27 Puppies Who Are Too Cute To Be Real',
},
{
image: SITE_ROOT + '/images/pinterestDogs016.jpg',
meta: 'These 33 Dogs With The Most Unique Coats On Earth Took My Breath Away. My Favorite Is #7!',
},
{
image: SITE_ROOT + '/images/pinterestDogs017.jpg',
meta: '5 Cutest Teacup puppies you have ever seen',
},
{
image: SITE_ROOT + '/images/pinterestDogs018.jpg',
meta: 'mini-Schnauzer puppy.. precious ♥ he looks so much like Jackson as a puppy!!! OBSESSED.',
},
{
image: SITE_ROOT + '/images/pinterestDogs019.jpg',
meta: '13 Baby Animals Being Grumpy Old Men - though #6 definitely sounds like me',
},
{
image: SITE_ROOT + '/images/pinterestDogs020.jpg',
meta:
"10 Most Rare Dog Breeds and I want most of them. Just the big dogs. Not the little ones. I'm not a huge fan of little dogs. But give me a big dog and I'm all set. (:",
},
{
image: SITE_ROOT + '/images/pinterestDogs021.jpg',
meta: 'Absolutely In Love♥',
},
{
image: SITE_ROOT + '/images/pinterestDogs022.jpg',
meta: '~☼ᴘɪɴᴛᴇʀᴇsᴛ → ᴄᴀᴍᴍɪw2002 (ᴄᴀᴍᴍɪ ᴡɪʟʟɪᴀᴍs)',
},
{
image: SITE_ROOT + '/images/pinterestDogs023.jpg',
meta:
'So little puppies have to take little puppy naps: | 20 Puppies Cuddling With Their Stuffed Animals During Nap Time',
},
{
image: SITE_ROOT + '/images/pinterestDogs024.jpg',
meta: 'Whaaaaat? There really is not Santa Claus?',
},
{
image: SITE_ROOT + '/images/pinterestDogs025.jpg',
meta: 'Cute little Rottweiler puppy. This reminds me of Rocky. Miss him so much.',
},
{
image: SITE_ROOT + '/images/pinterestDogs026.jpg',
meta:
"Ok probably the most adorable picture I've ever seen. His stomach hits the ground! Thank you Jesus for dogs.",
},
{
image: SITE_ROOT + '/images/pinterestDogs027.jpg',
meta:
'Top 10 Apartment Friendly Dog Breeds | Apartment List I wanttttt a dogggg! I chose the Mastiff because this dog looks means enough to protect me, would enjoy long walks with me, and would be a great cuddler :)',
},
{
image: SITE_ROOT + '/images/pinterestDogs028.jpg',
meta: "Our little guy's due in 4 days... Fingers crossed, Puppy Fever!!!",
},
{
image: SITE_ROOT + '/images/pinterestDogs029.jpg',
meta:
'This security guard that will babysit while the parents go out to dance. | 27 Dogs That Will Do Anything For Kids',
},
{
image: SITE_ROOT + '/images/pinterestDogs030.jpg',
meta: 'The dog that just wants to take a l’il nap: | 21 Dogs That Are Completely Mistaken About How Big They Are',
},
{
image: SITE_ROOT + '/images/pinterestDogs031.jpg',
meta: 'Thank you, thank you... And when I become President, free teddy bears for everyone! Thank you, thank you...',
},
{
image: SITE_ROOT + '/images/pinterestDogs032.jpg',
meta:
"38 cute baby animal pics, supposedly boost productivity. Seriously no lie, stop whatever you're doing and look at these right now. DO IT.",
},
{
image: SITE_ROOT + '/images/pinterestDogs033.jpg',
meta: 'THIS puppy in a onesie. | 50 Animal Pictures You Need To See Before You Die',
},
{
image: SITE_ROOT + '/images/pinterestDogs034.jpg',
meta: 'They Are The Cutest Puppies-labradoodles. #puppied',
},
{
image: SITE_ROOT + '/images/pinterestDogs035.jpg',
meta:
"They're the best kind of holiday gift you can get. | 15 Reasons Why Golden Retrievers Are The Best Dogs Ever",
},
{
image: SITE_ROOT + '/images/pinterestDogs036.jpg',
meta: 'This pooch struggling to uncurl herself. | 61 Images Of Animals That Are Guaranteed To Make You Smile',
},
{
image: SITE_ROOT + '/images/pinterestDogs037.jpg',
meta:
"You can't handle the cuteness of a Klee Kai puppy, a breed when full-grown, will be about the size of a Cocker Spaniel, and look like a mini...",
},
{
image: SITE_ROOT + '/images/pinterestDogs038.jpg',
meta:
'huskies meet for first time at vet. boy husky (left): "wow you\'re pretty" girl husky (right): "okay...um thanks"',
},
{
image: SITE_ROOT + '/images/pinterestDogs039.jpg',
meta: "Is This The World's Biggest Pit Bull? I didn't believe how much he weighed until I saw these pictures.",
},
{
image: SITE_ROOT + '/images/pinterestDogs040.jpg',
meta: 'Wolf hybrid. ❤',
},
{
image: SITE_ROOT + '/images/pinterestDogs041.jpg',
meta: 'Soccer Pup Black Labrador Retriever Puppy Dog Puppies Hound Dogs',
},
{
image: SITE_ROOT + '/images/pinterestDogs042.jpg',
meta: '12 Teeny Tiny Puppies You Must See Now! #animals #pet. Unconditional love: www.pinterest.com...',
},
{
image: SITE_ROOT + '/images/pinterestDogs044.jpg',
meta:
"This dog's awkward attempt at trying to not look terrified in the car. | The 61 Most Awkward Moments In The History Of Dogs",
},
{
image: SITE_ROOT + '/images/pinterestDogs045.jpg',
meta: 'and this is the reason i want a pomsky. ITS SO CUTEEEEE IM GONNA DIE AWWWWWWWWWWWW',
},
{
image: SITE_ROOT + '/images/pinterestDogs046.jpg',
meta: 'The Ultimate List of Companies With Secret Menus and Free Products For Your Pup -- Starbucks Pupucinno',
},
{
image: SITE_ROOT + '/images/pinterestDogs047.jpg',
meta: 'Baby Bulldog, one day I will have one and I will name him Rocco',
},
{
image: SITE_ROOT + '/images/pinterestDogs048.jpg',
meta: 'dalmatian puppy. I want!',
},
{
image: SITE_ROOT + '/images/pinterestDogs049.jpg',
meta: 'Definitely going to need these tips for next year when Penelope lives with me and my roommate!',
},
{
image: SITE_ROOT + '/images/pinterestDogs050.jpg',
meta:
'HEAD TILTS HAVE NEVER LOOKED MORE ADORABLE. | 23 Reasons Bernese Mountain Dogs Are The Champions Of Our Hearts',
},
{
image: SITE_ROOT + '/images/pinterestDogs051.jpg',
meta: 'oh my goodness...I have no words for the cuteness of the picture',
},
{
image: SITE_ROOT + '/images/pinterestDogs052.jpg',
meta:
"Meet Simba. He's a Leonberger. Fun fact: After the second world war, there were only 8 of these in the entire world. Every single Leonberger today can be traced back to these.",
},
{
image: SITE_ROOT + '/images/pinterestDogs053.jpg',
meta: 'Change the title to "25 adorable photos that prove why children and animals are best friends"',
},
{
image: SITE_ROOT + '/images/pinterestDogs054.jpg',
meta:
'Here Are 22 Adorable Dog Cross-Breeds You’ve Never Heard Of. The Last One Will Melt Your Heart. --- I want one of each! ♥',
},
{
image: SITE_ROOT + '/images/pinterestDogs055.jpg',
meta:
'The luckiest girl in the world taking a bath in puppies. | 50 Animal Pictures You Need To See Before You Die',
},
{
image: SITE_ROOT + '/images/pinterestDogs056.jpg',
meta:
'48 Times Tumblr Was Funny About Animals. You actually have to look at this. I laughed at them all for 20mins. STRAIGHT!',
},
{
image: SITE_ROOT + '/images/pinterestDogs057.jpg',
meta: '“Oh, I still have to use my inside voice in here? SORRY.” | 18 Puppies On Their Way To Their New Home',
},
{
image: SITE_ROOT + '/images/pinterestDogs058.jpg',
meta:
'the black looks like my dog. the brown one looks like my old dog., Go To www.likegossip.com to get more Gossip News!',
},
{
image: SITE_ROOT + '/images/pinterestDogs059.jpg',
meta:
'Just because looking at this little guy will brighten up any #polarvortex day. Another great way to make your day awesome? Making an appointment with your local ASBP blood donor center to #donateblood or #platelets.',
},
{
image: SITE_ROOT + '/images/pinterestDogs060.jpg',
meta:
'The Cutest Existentialist | Why it matters: This photo was taken by Albert Camus right before he wrote The Stranger as he realized no greater meaning could ever be fathomed.',
},
{
image: SITE_ROOT + '/images/pinterestDogs061.jpg',
meta: 'And often end up in situations they can’t explain. | 21 Reasons Puppies Are Basically Furry Drunk People',
},
{
image: SITE_ROOT + '/images/pinterestDogs062.jpg',
meta:
'The Cardigan Welsh Corgi ~ is a small herding dog that originated in Wales. One of the 5 Best Dogs Breeds for children.',
},
{
image: SITE_ROOT + '/images/pinterestDogs063.jpg',
meta: 'He thinks he has to wait in line to get a treat',
},
{
image: SITE_ROOT + '/images/pinterestDogs064.jpg',
meta: "These two troublemakers. | 32 Puppies Who Are Happy And They Know It But Can't Necessarily Clap Their...",
},
{
image: SITE_ROOT + '/images/pinterestDogs065.jpg',
meta: 'Sunny Skyz: Positive Upbeat Media. Good News, Inspirational Stories, Happy Pictures and Videos',
},
{
image: SITE_ROOT + '/images/pinterestDogs066.jpg',
meta: '38 Brillant Dog Care Ideas to Make Your Life easier!',
},
{
image: SITE_ROOT + '/images/pinterestDogs067.jpg',
meta: 'He looks so soft, I just want to cuddle him all day. *** Love Your Dogs?? Visit our website now!',
},
{
image: SITE_ROOT + '/images/pinterestDogs068.jpg',
meta: 'A Wine Barrel Dog Bed @Joyce Novak Novak Novak Dyer i think you need to make this happen for murph!',
},
{
image: SITE_ROOT + '/images/pinterestDogs069.jpg',
meta: 'Just for you…pet bargains. gjconstructs.wix....',
},
{
image: SITE_ROOT + '/images/pinterestDogs070.jpg',
meta: 'Think these foods are okay for your dog? Think again huff.to/1gvuxB5 #pets #dogs',
},
{
image: SITE_ROOT + '/images/pinterestDogs071.jpg',
meta:
'Do You Have A New Puppy? or maybe you are getting a new puppy and want to make sure you know how to properly raise your dog from day 1.This book was written to give you Action Steps to follow ASAP!Heres the breakdown that we will cover.*1.Puppy Proofing Your Home *2. Choosing The Right Food*3.Create Scheduled Feeding Times*4.The Advantages of Crate Training*5. Training Tips And Techniques*6.Simple and effectiv',
},
{
image: SITE_ROOT + '/images/pinterestDogs072.jpg',
meta:
"Border Collies and Poodles are thought to be the most intelligent dogs. | 22 Awesome Things You Didn't Know About Your Dog",
},
{
image: SITE_ROOT + '/images/pinterestDogs073.jpg',
meta:
"Leave your pup with experienced dog sitters while your'e away. www.rover.com/... Use PROMO code KATYANDWES20 For $20 off your first stay!",
},
{
image: SITE_ROOT + '/images/pinterestDogs074.jpg',
meta: 'Read your dog’s body language. | 38 Brilliant Dog-Care Ideas To Make Your LifeEasier',
},
{
image: SITE_ROOT + '/images/pinterestDogs075.jpg',
meta: 'Mini Goldendoodle- pretty please chase?!',
},
{
image: SITE_ROOT + '/images/pinterestDogs076.jpg',
meta: 'TOP 10 Best Dog Breeds For A Family With Kids - Old English Sheepdog',
},
{
image: SITE_ROOT + '/images/pinterestDogs077.jpg',
meta: "He ain't heavy...he's my brother! • photo: Peluna on Flickr",
},
{
image: SITE_ROOT + '/images/pinterestDogs078.jpg',
meta: 'This is awesome .he is beautiful',
},
{
image: SITE_ROOT + '/images/pinterestDogs079.jpg',
meta: 'Top 5 Healthiest Dog Breeds follow my profile and check more on my website',
},
{
image: SITE_ROOT + '/images/pinterestDogs080.jpg',
meta: '❤ However this came about; it made me smile!',
},
{
image: SITE_ROOT + '/images/pinterestDogs081.jpg',
meta: 'I just need to jump in 1 more puddle, please just 1 more!',
},
{
image: SITE_ROOT + '/images/pinterestDogs082.jpg',
meta: 'A Great Dane who is friends with a fawn. ♥',
},
{
image: SITE_ROOT + '/images/pinterestDogs083.jpg',
meta:
"I know it's not a Yorkie, but it has to be the cutest lil puppy ever!!! Soo adorable!! For more please visit: www.flyfreshforev...",
},
{
image: SITE_ROOT + '/images/pinterestDogs084.jpg',
meta:
'This teeny corgi puppy with the most adorable ears in the ENTIRE WORLD. | 33 Aggressively Adorable Photos To Restore Your Faith In The World',
},
{
image: SITE_ROOT + '/images/pinterestDogs085.jpg',
meta: "Anyone who can't see the distance between the two is blind! But he is a big boy",
},
{
image: SITE_ROOT + '/images/pinterestDogs086.jpg',
meta:
'The greatest mail delivery that has ever happened. | 61 Images Of Animals That Are Guaranteed To Make You Smile',
},
{
image: SITE_ROOT + '/images/pinterestDogs087.jpg',
meta: '25 Cats And Dogs Losing The Battle With Human Furniture',
},
{
image: SITE_ROOT + '/images/pinterestDogs088.jpg',
meta:
'This little lady who has ears that are so adorable the entire population of planet Earth has been overcome with cuteness. | 27 Puppies Who Are Too Cute To Be Real',
},
{
image: SITE_ROOT + '/images/pinterestDogs089.jpg',
meta: 'I picked Bentley entirely based on the fact that he was lying on his back sleeping when I saw him!',
},
{
image: SITE_ROOT + '/images/pinterestDogs090.jpg',
meta:
'“I box because I thought that’s what I was supposed to do but what if I’m not a fighter at all? What if I’m a painter?” | 23 Dogs Who Don’t Even Know Who They Are Anymore',
},
];

html {
position: fixed;
width: 100%;
}
.img-board {
border: 1px solid #e0e0e0;
border-radius: 7px;
overflow: hidden;
transition: 0.222s;
}
.img-board:hover {
border-color: #333;
}
.img-board .meta {
display: inline-block;
color: #333;
font-size: 11px;
padding: 0.5em;
}
.img-board table {
border-collapse: collapse;
}
.img-board table tr,
.img-board table td {
padding: 0;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9NYXNvbnJ5L01hc29ucnlMYXlvdXQvYW5ndWxhci9zdHlsZXMuc2NzcyIsIkRhdGFWaWV3cy9NYXNvbnJ5L01hc29ucnlMYXlvdXQvYW5ndWxhci9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsZUFBQTtFQUNBLFdBQUE7QUNDRjs7QURFQTtFQUNFLHlCQUFBO0VBQ0Esa0JBQUE7RUFDQSxnQkFBQTtFQUNBLGtCQUFBO0FDQ0Y7QURDRTtFQUNFLGtCQUFBO0FDQ0o7QURFRTtFQUNFLHFCQUFBO0VBQ0EsV0FBQTtFQUNBLGVBQUE7RUFDQSxjQUFBO0FDQUo7QURHRTtFQUNFLHlCQUFBO0FDREo7QURHSTs7RUFFRSxVQUFBO0FDRE4iLCJmaWxlIjoiRGF0YVZpZXdzL01hc29ucnkvTWFzb25yeUxheW91dC9hbmd1bGFyL3N0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJodG1sIHtcbiAgcG9zaXRpb246IGZpeGVkO1xuICB3aWR0aDogMTAwJTtcbn1cblxuLmltZy1ib2FyZCB7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNlMGUwZTA7XG4gIGJvcmRlci1yYWRpdXM6IDdweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdHJhbnNpdGlvbjogMC4yMjJzO1xuXG4gICY6aG92ZXIge1xuICAgIGJvcmRlci1jb2xvcjogIzMzMztcbiAgfVxuXG4gIC5tZXRhIHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgY29sb3I6ICMzMzM7XG4gICAgZm9udC1zaXplOiAxMXB4O1xuICAgIHBhZGRpbmc6IDAuNWVtO1xuICB9XG5cbiAgdGFibGUge1xuICAgIGJvcmRlci1jb2xsYXBzZTogY29sbGFwc2U7XG5cbiAgICB0cixcbiAgICB0ZCB7XG4gICAgICBwYWRkaW5nOiAwO1xuICAgIH1cbiAgfVxufVxuIiwiaHRtbCB7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgd2lkdGg6IDEwMCU7XG59XG5cbi5pbWctYm9hcmQge1xuICBib3JkZXI6IDFweCBzb2xpZCAjZTBlMGUwO1xuICBib3JkZXItcmFkaXVzOiA3cHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRyYW5zaXRpb246IDAuMjIycztcbn1cbi5pbWctYm9hcmQ6aG92ZXIge1xuICBib3JkZXItY29sb3I6ICMzMzM7XG59XG4uaW1nLWJvYXJkIC5tZXRhIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBjb2xvcjogIzMzMztcbiAgZm9udC1zaXplOiAxMXB4O1xuICBwYWRkaW5nOiAwLjVlbTtcbn1cbi5pbWctYm9hcmQgdGFibGUge1xuICBib3JkZXItY29sbGFwc2U6IGNvbGxhcHNlO1xufVxuLmltZy1ib2FyZCB0YWJsZSB0cixcbi5pbWctYm9hcmQgdGFibGUgdGQge1xuICBwYWRkaW5nOiAwO1xufSJdfQ== */

(function () {
const IS_PROD = window.process.env.NODE_ENV === 'production';
const USE_NPM = window.process.env.USE_NPM;
const USE_CDN = window.process.env.USE_CDN;
const SITE_ROOT = window.process.env.SITE_ROOT;
const FRAMEWORK = window.process.env.FRAMEWORK;
const ext = IS_PROD ? '.min.js' : '.js';
function js(name) {
return name + ext;
}
function npm(t) {
if (!t.file) {
t.file = IS_PROD ? t.prod : t.dev;
}
const version = USE_CDN && t.version ? '@' + t.version : '';
const path = t.pkg + version + '/' + t.file;
if (USE_CDN) {
return 'https://unpkg.com/' + path;
}
return 'npm:' + path;
}
function dv(t) {
if (USE_CDN || USE_NPM) {
t.file = 'dist/' + t.file + '.min.js';
return npm(t);
}
return SITE_ROOT + '/static/dataviews/' + js(t.file);
}
const isTypeScript = FRAMEWORK === 'angular';
const babelConfig = {
es2015: true,
react: true,
};
const meta = {
js: {
babelOptions: babelConfig,
},
ts: {
typescriptOptions: {
tsconfig: true
},
},
};
const map = {
// gc.dataviews packages
'@grapecity/dataviews.common': dv({pkg:'@grapecity/dataviews.common',file:'gc.dataviews.common',version:'1.8.17'}),
'@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.17'}),
'@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.17'}),
'@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.17'}),
'@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.17'}),
'@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.17'}),
'@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.17'}),
'@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.17'}),
'@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.17'}),
'@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.17'}),
'@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.17'}),
'@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.17'}),
'@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.17'}),
'@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.17'}),
// third-party libs
react: npm({pkg:'react',prod:'umd/react.production.min.js',dev:'umd/react.development.js',version:'16.13.1'}),
'react-dom': npm({pkg:'react-dom',prod:'umd/react-dom.production.min.js',dev:'umd/react-dom.development.js',version:'16.13.1'}),
'react-router-dom': npm({pkg:'react-router-dom',prod:'umd/react-router-dom.min.js',dev:'umd/react-router-dom.js',version:'5.2.0'}),
'vue': npm({pkg:'vue',file:'dist/vue.js',version:'2.6.12'}),
'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.4.3'}),
'lodash': npm({pkg: 'lodash', file: js('lodash')}),
'zone.js': npm({pkg: 'zone.js', file: js('dist/zone')}),
'rxjs': npm({pkg: 'rxjs', file: js('bundles/rxjs.umd')}),
'rxjs/operators': npm({pkg:'rxjs-operators-bundle',prod:'dist/bundle.min.js',dev:'dist/bundle.js',version:'1.0.2'}),
'@angular/core': npm({pkg: '@angular/core', file: js('bundles/core.umd')}),
'@angular/common': npm({pkg: '@angular/common', file: js('bundles/common.umd')}),
'@angular/compiler': npm({pkg: '@angular/compiler', file: js('bundles/compiler.umd')}),
'@angular/platform-browser': npm({pkg: '@angular/platform-browser', file: js('bundles/platform-browser.umd')}),
'@angular/platform-browser-dynamic': npm({pkg: '@angular/platform-browser-dynamic', file: js('bundles/platform-browser-dynamic.umd')}),
'@angular/http': npm({pkg: '@angular/http', file: js('bundles/http.umd')}),
'@angular/common/http': npm({pkg: '@angular/common', file: js('bundles/common-http.umd')}),
'@angular/router': npm({pkg: '@angular/router', file: js('bundles/router.umd')}),
'@angular/forms': npm({pkg: '@angular/forms', file: js('bundles/forms.umd')}),
// systemjs plugins
'systemjs-plugin-json': npm({pkg:'systemjs-plugin-json',file:'json.js',version:'0.3.0'}),
'systemjs-plugin-css': npm({pkg:'systemjs-plugin-css',file:'css.js',version:'0.1.37'}),
'systemjs-plugin-babel': npm({pkg:'systemjs-plugin-babel',file:'plugin-babel.js',version:'0.0.25'}),
'systemjs-babel-build': npm({pkg:'systemjs-plugin-babel',file:'systemjs-babel-browser.js',version:'0.0.25'}),
'plugin-typescript': npm({pkg:'plugin-typescript',file:'lib/plugin.js',version:'8.0.0'}),
'typescript': npm({pkg:'typescript',file:'lib/typescript.js',version:'4.0.2'}),
'systemjs-vue-browser': npm({pkg:'systemjs-vue-browser',file:'index.js',version:'1.0.11'}),
};
const config = {
defaultJSExtensions: true,
transpiler: isTypeScript ? 'plugin-typescript' : 'systemjs-plugin-babel',
typescriptOptions: {
tsconfig: true
},
meta: {
'*.json': {loader: 'systemjs-plugin-json'},
'*.css': {loader: 'systemjs-plugin-css'},
'*.vue': {loader: 'systemjs-vue-browser'},
'*.js': meta.js,
'*.ts': meta.ts,
'app.js': {
format: 'esm',
babelOptions: babelConfig,
},
'typescript': {
exports: 'ts',
},
'@grapecity/dataviews.common': {
format: 'amd',
},
'@grapecity/dataviews.core': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.grid': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.cardlayout': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.masonry': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.calendar': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.timeline': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.trellis': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.gantt': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.searchbox': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.react': {
format: 'amd',
deps: [
'react',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.vue': {
format: 'amd',
deps: [
'vue',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.angular': {
format: 'amd',
deps: [
'@angular/core',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.csvexport': {
format: 'amd',
deps: [
'@grapecity/dataviews.common'
],
},
},
paths: {
// paths serve as alias
'npm:': SITE_ROOT + '/node_modules/',
},
// map tells the System loader where to look for things
map: map,
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'.': { defaultExtension: isTypeScript ? 'ts' : 'js' },
node_modules: { defaultExtension: 'js' },
}
};
// fast format detection to avoid detection by source code using regexp
Object.keys(map).filter(function (key) {
return !config.meta[key];
}).forEach(function (key) {
const path = map[key];
if (path.indexOf('/umd') >= 0 || path.indexOf('.umd') >= 0) {
config.meta[key] = { format: 'amd' };
}
if (path.indexOf('/cjs') >= 0) {
config.meta[key] = { format: 'cjs' };
}
});
System.config(config);
})(this);

Masonry Layout (Angular)