UIKIT REACT Masonry Galerie

by Greggg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.3/js/components/grid.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.3/js/components/lightbox.min.js"></script>
<div id="container" ></div>

Babel + JSX

let masonryGallery = {
	_id: '507f191e810c19729de860ea',
	options: {
		smallScreenColumn: 2, 
		mediumScreenColumn: 3, 
		largeScreenColumn: 5, 
		displayTagFilter: true,
		gutterWidth: '20px',
		lightbox: 'mygroup', 
		scrollspyEffect: 'uk-animation-fade'
	},
	data: [{
				tag: 'Filter A',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/1.jpg',
        link: true,
        href: "",
        lightbox: 'mygroup'
    }, {
        tag: 'Filter B',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/2.jpg'
    }, {
        tag: 'Filter A',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/3.jpg'
    }, {
        tag: '',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/12.png'
    }, {
        tag: '',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/4.jpg'
    }, {
        tag: 'Filter A',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/10.png'
    }, {
        tag: '',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/1.jpg'
    }, {
        tag: 'Filter A',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/4.jpg'
    }, {
        tag: 'Filter A',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/3.jpg'
    }, {
				tag: 'Filter A',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/1.jpg'
    }, {
        tag: 'Filter B',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/2.jpg'
    }, {
        tag: 'Filter A',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/3.jpg'
    }, {
        tag: '',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/12.png'
    }, {
        tag: '',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/4.jpg'
    }, {
        tag: 'Filter A',
        src: 'http://tympanus.net/Development/GridLoadingEffects/images/10.png'
    }, {
       ...