Im unable to successfully get masonry working for my Magento 2.0 theme. What i have done currently is i added the link to Masonry cdn to my file default_head_blocks.xml and also called the function from one of my CMS pages. But no luck, nothing works.
Here is my default_head_blocks.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<css src="css/styles-m.css" />
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print" />
<link src="https://fonts.googleapis.com/css?family=Roboto:400,300" src_type="url" />
<link src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js" src_type="url" />
</head>
</page>
Here is CMS page content
<div class="grid">
<div class="grid-item">Grid 1</div>
<div class="grid-item grid-item--width2"> Grid 2</div>
<div class="grid-item">Grid 3</div>
</div>
<script>
$(function(){
var $container = $('. grid');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.grid-item'
});
});
});
</script>
<head><link src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js" src_type="url" /> </head>
for external js follow this magento.stackexchange.com/questions/98091/… – Qaisar Satti Jan 26 '16 at 6:05