Search for best collage plugin

by Jayson Buquia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.2/packery.pkgd.min.js"></script>
<h3>Packery Wins!</h3>
<div class="gallery">
    <div class="item"><img src="http://www.placehold.it/300x200" alt=""></div>
        <div class="item"><img src="http://www.placehold.it/300x200" alt=""></div>
            <div class="item"><img src="http://www.placehold.it/300x200" alt=""></div>
                <div class="item"><img src="http://www.placehold.it/300x200" alt=""></div>
                    <div class="item"><img src="http://www.placehold.it/300x200" alt=""></div>
                        <div class="item"><img src="http://www.placehold.it/300x200" alt=""></div>
                            <div class="item"><img src="http://www.placehold.it/300x200" alt=""></div>
                                <div class="item"><img src="http://www.placehold.it/300x200" alt=""></div>
                                    <div class="item"><img src="http://www.placehold.it/300x200" alt=""></div>
                                        <div class="item"><img src="http://www.placehold.it/300x200" alt=""></div>
</div>

SCSS

.gallery {
    width: 100%;
    height: 300px;
    overflow: hidden;
    
    &:before, &:after {
        content: '',
        display: table;        
        clear: both;
    }
}

.item {
    display: inline-block;
    float: left;
    width: 120px;
    height: 100px;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
    
    &:nth-of-type(1) {
        width: 240px;
        height: 300px;
    }
    
    @each $index in (4,5) {
        &:nth-of-type(#{$index}) {
            width: 240px;
            height: 200px;
        }
    }
    
        
    
    
}

img {   
    opacity: 0.7;
}

JavaScript

/*!
 *
 * jQuery collagePlus Plugin v0.3.3
 * https://github.com/ed-lea/jquery-collagePlus
 *
 * Copyright 2012, Ed Lea twitter.com/ed_lea
 *
 * built for http://qiip.me
 *
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.opensource.org/licenses/GPL-2.0
 *
 */
;(function(e){e.fn.collagePlus=function(t){function n(t,n,i,s){var o=i.padding*(t.length-1)+t.length*t[0][3],u=i.albumWidth-o,a=u/(n-o),f=o,l=n<i.albumWidth?true:false;for(var c=0;c<t.length;c++){var h=e(t[c][0]),p=Math.floor(t[c][1]*a),d=Math.floor(t[c][2]*a),v=!!(c<t.length-1);if(i.allowPartialLastRow===true&&l===true){p=t[c][1];d=t[c][2]}f+=p;if(!v&&f<i.albumWidth){if(i.allowPartialLastRow===true&&l===true){p=p}else{p=p+(i.albumWidth-f)}}p--;var m=h.is("img")?h:h.find("img");m.width(p);if(!h.is("img")){h.width(p+t[c][3])}m.height(d);if(!h.is("img")){h.height(d+t[c][4])}r(h,v,i);m.one("load",function(e){return function(){if(i.effect=="default"){e.animate({opacity:"1"},{duration:i.fadeSpeed})}else{if(i.direction=="vertical"){var t=s<=10?s:10}else{var t=c<=9?c+1:10}e.removeClass(function(e,t){return(t.match(/\beffect-\S+/g)||[]).join(" ")});e.addClass(i.effect);e.addClass("effect-duration-"+t)}}}(h)).each(function(){if(this.complete)e(this).trigger("load")})}}function r(e,t,n){var r={"margin-bottom":n.padding+"px","margin-right":t?n.padding+"px":"0px",display:n.display,"vertical-align":"bottom",overflow:"hidden"};return e.css(r)}function i(t){$img=e(t);var n=new Array;n["w"]=parseFloat($img.css("border-left-width"))+parseFloat($img.css("border-right-width"));n["h"]=parseFloat($img.css("border-top-width"))+parseFloat($img.css("border-bottom-width"));return n}return this.each(function(){var r=0,s=[],o=1,u=e(this);e.fn.collagePlus.defaults.albumWidth=u.width();e.fn.collagePlus.defaults.padding=parseFloat(u.css("padding-left"));e.fn.collagePlus.defaults.images=u.children();var...