Masonry Gallery for MuraCMS

masonry.css

.masonryItem { 
    width: 8.65%;
    margin-bottom: 10px;
    float: left;
}
.masonryItem.w2 {
    width: 19.5%;
    margin-bottom: 10px;
}
#masonryContainer {
	margin: 0 auto;
	padding-top: 20px;
}

masonryGallery.cfm

<!---

1. A Gallery class extension titled Masonry.

2. This function needs to be added to the site or theme eventHandler.cfc 

3. masonry.pkgd.min.js located in theme js folder

4. masonry.css loaded into page head.
--->

<cffunction name="onGalleryMasonryBodyRender" access="public">
		<cfargument name="$" hint="mura scope" />
		
		
		<cfscript>
		var masonryMarkup = "";
		var aspect = "masonryItem";
		var iterator = $.content().getKidsIterator();
		iterator.setNextN(100);
		</cfscript>
		<cfif iterator.recordCount()>
			<cfsavecontent variable="masonryMarkup">
			<cfoutput>
				<div id="masonryContainer"> 
					<cfloop from=1 to="#iterator.recordCount()#" index="p">	
						<cfloop condition="#iterator.hasNext()#">
							<cfset item = iterator.next() />
							<cfimage action="info" source="#item.getImageUrl()#" structName="imgInfo">
							<cfif imgInfo.height gt imgInfo.width>
								<cfset aspect = "masonryItem" />
							<cfelse>
								<cfset aspect = "masonryItem w2">
							</cfif>
							<div class="#aspect#">
								<a href="#item.getImageUrl(size="large")#">
									<img src="#item.getImageUrl()#" alt="#htmlEditFormat(item.getValue('title'))#" />
								</a>
							</div>
						</cfloop>
					</cfloop>
				</div>
			
			<script src="#$.siteConfig('themeAssetPath')#/assets/PixmaWide/js/masonry.pkgd.min.js"></script>
			</cfoutput>
			<script type="text/javascript">
				var container = document.querySelector('#masonryContainer');
				var msnry;
					// initialize Masonry after all images have loaded
					imagesLoaded(container, function() {
					  msnry = new Masonry(container, {
					  // options
					  columnWidth: 136,
					  itemSelector: '.masonryItem',
					  gutter: 4,
					  isFitWidth: true
						});
					});
			</script>
			</cfsavecontent>
		<cfelse>
			<cfset masonryMarkup = "<p>No images exist under this gallery!</p>">
		</cfif>
		
		<cfreturn masonryMarkup>
	
	</cffunction>