JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="loadMore">Load more</a>
<section class="userGallery">
    <ul>
        <li>
            <a href="http://images.bit-tech.net/news_images/2009/03/google-launches-chrome-experiments/article_img.jpg" title="1"  ></a>
        </li>
        <li>
            <a href="http://farm4.static.flickr.com/3635/3323893254_3183671257.jpg" title="2"  ></a>
        </li>
        <li>
            <a href="http://www.cwa.me.uk/wp-content/uploads/2010/06/rxslidestitle.jpg" title="3"  ></a>
        </li>
        <li>
            <a href="http://www.tikirobot.net/wp/wp-content/uploads/2010/09/js1k8bar.jpg" title="4"  ></a>
        </li>
        <li>
            <a href="http://media.tumblr.com/tumblr_lyzdkuOXcR1qbis4g.png" title="5"  ></a>
        </li>
        <li>
            <a href="http://www.ozone3d.net/public/jegx/201009/pulsing_3d_wires_1k_javascript.jpg" title="6"  ></a>
        </li>
        <li>
            <a href="http://www.creativeapplications.net/wp-content/uploads/2011/08/100demos01-640x355.png" title="7"  ></a>
        </li>
        <li>
            <a href="http://www.ajaxblender.com/article-sources/images/nature-1.jpg" title="8"  ></a>
        </li>
        <li>
            <a href="http://3.bp.blogspot.com/_JSR8IC77Ub4/TNU6FEq6UZI/AAAAAAAABSk/f0dWKm3HUhM/s1600/Screenshot-10.png" title="9"  ></a>
        </li>
        <li>
            <a href="http://www.ajaxblender.com/article-sources/images/plane-1.jpg" title="10"  ></a>
        </li>
    </ul>
</section>

CSS

img {
    width:100px;
    height:100px;
    margin:.5em;
    opacity:1;
    float:left
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}

JavaScript

function buildImg() {
    $('li').each(function(){
        // find the anchor, make a variable out of its href
        var loc = $(this).find('a').attr('href'),
            // find the anchor, make a variable out of its title
            ttl = $(this).find('a').attr('title'),
            // find the section and append an image to it with the source and alt text set to the variables we made above
            img = $('.userGallery').append($('<img/>', { class: 'user', src: loc, alt: ttl })),
            // make a variable of the images that have been printed to the page
            usr = $('.user');

        usr.each(function(i){
            //fade them in one after the other
            $(this).delay(200*i).animate({ opacity:1 },400);
        });
    });
}

    var elm = $('li'), // li's
        cnt = 0, // starting count
        tns = []; // array
    
    for(i=0;i<elm.length;i++){
           if(cnt==10){
             buildImg(tns);
             tns=[];   
           }
           tns[cnt++]=elm[i].image;
        }
        
        buildImg(tns);