added masonry to popular page

public/assets/css/general.css

@@ -528,3 +528,13 @@ table {
 .wrap-words {
 	word-wrap: break-word;
 }
+
+/* ---- grid items ---- */
+
+.grid-item {
+	width: calc(30% - 2rem);
+	padding: 0px;
+	margin: 1rem;
+	float: left;
+	display: block;
+}

views/partials/gridItem.handlebars

@@ -0,0 +1,7 @@
+<a href="{{this.showUrlLong}}">
+{{#ifConditional this.contentType '===' 'video/mp4'}}
+    <img class="content-list-item-asset grid-item" src="{{this.thumbnail}}"/>
+{{else}}
+    <img  class="content-list-item-asset grid-item" src="{{this.directUrlLong}}" />
+{{/ifConditional}}
+</a>

views/popular.handlebars

@@ -1,6 +1,26 @@
-<div class="row">
+<div class="row grid">
     {{#each trendingAssets}}
-        {{> contentListItem}}
+        {{> gridItem}}
     {{/each}}
 </div>
 
+<script src="/assets/vendors/masonry/masonry.pkgd.min.js"></script>
+<script src="/assets/vendors/imagesloaded/imagesloaded.pkgd.min.js"></script>
+<script>
+    // init masonry with element
+    var grid = document.querySelector('.grid');
+    var msnry;
+
+    imagesLoaded( grid, function() {
+        msnry = new Masonry( grid, {
+            itemSelector: '.grid-item',
+            columnWidth: 3,
+            percentPosition: true
+        });
+    });
+
+    // init with selector
+//    var msnry = new Masonry( '.grid', {
+//        // options...
+//    });
+</script>