<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>requirejs | Nerdpress.org</title>
	<atom:link href="https://nerdpress.org/tag/requirejs/feed/" rel="self" type="application/rss+xml" />
	<link>https://nerdpress.org</link>
	<description>...dev, tech problems and solutions.</description>
	<lastBuildDate>Mon, 03 Mar 2014 07:57:06 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.5</generator>
	<item>
		<title>bower, require.js, masonry &#038; imagesloaded</title>
		<link>https://nerdpress.org/2014/01/28/bower-require-js-masonry-imagesloaded/</link>
		
		<dc:creator><![CDATA[Ivo Bathke]]></dc:creator>
		<pubDate>Tue, 28 Jan 2014 17:02:42 +0000</pubDate>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[bower]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[masonry]]></category>
		<category><![CDATA[requirejs]]></category>
		<guid isPermaLink="false">https://nerdpress.org/?p=2519</guid>

					<description><![CDATA[<p>Wanna run masonry with imagesloaded in require.js, powered by bower? Try this gist! First create your bower.json file and run bower install Then configure require.js and then code the app: Its scrabbled together from http://masonry.desandro.com/appendix.html and various StackOverflow posts.</p>
The post <a href="https://nerdpress.org/2014/01/28/bower-require-js-masonry-imagesloaded/">bower, require.js, masonry & imagesloaded</a> first appeared on <a href="https://nerdpress.org">Nerdpress.org</a>.]]></description>
										<content:encoded><![CDATA[<p>Wanna run <a href="http://masonry.desandro.com/" target="_blank">masonry</a> with <a href="https://github.com/desandro/imagesloaded" target="_blank">imagesloaded</a> in <a href="http://www.requirejs.org/" target="_blank">require.js</a>, powered by <a href="http://bower.io" target="_blank">bower</a>?</p>
<p>Try this <a href="https://gist.github.com/ivoba/7097270" target="_blank">gist</a>!</p>
<p>First create your bower.json file and run <strong>bower install</strong><br />
<script src="https://gist.github.com/7097270.js?file=bower.json"></script><noscript><pre><code class="language-json json">{
  &quot;name&quot;: &quot;bower-masonry-imagesloaded-requirejs&quot;,
  &quot;version&quot;: &quot;0.0.0&quot;,
  &quot;dependencies&quot;: {
    &quot;requirejs&quot;: &quot;~2.1.8&quot;,
    &quot;jquery&quot;: &quot;~1.10.2&quot;,
    &quot;masonry&quot;: &quot;~3.1.2&quot;,
    &quot;imagesloaded&quot;: &quot;~3.0.4&quot;
  }
}</code></pre></noscript></p>
<p><span id="more-2519"></span></p>
<p>Then configure require.js<br />
<script src="https://gist.github.com/7097270.js?file=main.js"></script><noscript><pre><code class="language-javascript javascript">require.config({
    paths: {
        jquery: &#039;../bower_components/jquery/jquery&#039;,
        eventie: &#039;../bower_components/eventie&#039;,
        &#039;doc-ready&#039;: &#039;../bower_components/doc-ready&#039;,
        eventEmitter: &#039;../bower_components/eventEmitter&#039;,
        &#039;get-style-property&#039;: &#039;../bower_components/get-style-property&#039;,
        &#039;get-size&#039;: &#039;../bower_components/get-size&#039;,
        &#039;matches-selector&#039;: &#039;../bower_components/matches-selector&#039;,
        outlayer: &#039;../bower_components/outlayer&#039;,
        masonry: &#039;../bower_components/masonry&#039;,
        imagesloaded: &#039;../bower_components/imagesloaded&#039;
    }
});</code></pre></noscript></p>
<p>and then code the app:<br />
<script src="https://gist.github.com/7097270.js?file=app.js"></script><noscript><pre><code class="language-javascript javascript">define([&#039;masonry/masonry&#039;, &#039;imagesloaded/imagesloaded&#039;], function(Masonry, imagesLoaded) {
    $(document).ready(function() {
        var container = document.querySelector(&#039;#masonry&#039;);
        imagesLoaded(container, function() {
           var msnry = new Masonry(container, {
               columnWidth: 200,
                gutter: 20,
                itemSelector: &#039;.item&#039;,
                isFitWidth: true
           });
             
       });
    });
});</code></pre></noscript></p>
<p>Its scrabbled together from <a href="http://masonry.desandro.com/appendix.html">http://masonry.desandro.com/appendix.html</a> and various StackOverflow posts.</p>The post <a href="https://nerdpress.org/2014/01/28/bower-require-js-masonry-imagesloaded/">bower, require.js, masonry & imagesloaded</a> first appeared on <a href="https://nerdpress.org">Nerdpress.org</a>.]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
