jquery botão Carregar mais

[kaiquemix 1]

Olá pessoal estou querendo um código em jquery que vai fazer que quando eu aperto em "CARREGAR MAIS" apareça mais coisas da minha UL.

 

Exemplo abaixo do meu código, no começo vai aparecer apenas 2 LI que tem a altura de acordo com a resolução da tela (está na função na parte do JS) e quando aperta em "CARREGAR MAIS" vai aparecer as 4 LI.

 

HTML:

<ul id="portfolio-grid" class="thumbnails row">
                        <li  class="span4 mix visu" >
                              <div class="thumbnail" >
                                 <a item href='javascript:;' onclick="abrirForm('teste');"  id="funci">
                                <img src="images/port/01.png" alt="project 2">
                                
                                <div class="mask"></div></a>
                            </div>
                        </li>
                        <li class="span4 mix web">
                            <div class="thumbnail" >
                                 <a item href='javascript:;' onclick="abrirForm('teste');"  id="funci">
                                <img src="images/port/05.png" alt="project 2">
                                
                                <div class="mask"></div></a>
                            </div>
                        </li>
                        <li class="span4 mix pape  ">
                            <div class="thumbnail  "  >
                                <a href='javascript:;' onclick="abrirForm2('tonviadinho');"  id="funci">
                                <img src="images/port/06.png" alt="project 2">
                                
                                <div class="mask"></div></a>
                            </div>
                        </li>
                        <li class="span4 mix comu  " >
                            <div class="thumbnail  ">
                                <img src="images/port/02.png" alt="project 3">
                                <a href="#single-project" class="more show_hide" rel="#slidingDiv2">
                                    <i class="icon-plus"></i>
                                </a>
                                <div class="mask"></div>
                            </div>
                        </li>
</ul>

  <div id="rend-more">
            <div id="bt-carregar"><a href="#">
            <h2>CARREGAR</h2><h3>+</h3></a></div>
        </div>
 

JS:

    
      
    
      var $container = $('#portfolio-grid'),
                    colWidth = function () {
                        var w = $container.width(), 
                            columnNum = 1,
                            columnWidth = 0;
                        if (w > 1200) {
                            columnNum  = 6;
                        } else if (w > 900) {
                            columnNum  = 3;
                        } else if (w > 600) {
                            columnNum  = 2;
                        } else if (w > 300) {
                            columnNum  = 1;
                        }
                        columnWidth = Math.floor(w/columnNum);
                        $container.find('.thumbnail').each(function() {
                            var $item = $(this),
                                multiplier_w = $item.attr('class').match(/item-w(\d)/),
                                multiplier_h = $item.attr('class').match(/item-h(\d)/),
                                width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-0.7,
                                height = multiplier_h ? columnWidth*multiplier_h[1]*0.2-4 : columnWidth*0.988-4;
                            $item.css({
                                width: width,
                                height: height
                            });
                        });
                        return columnWidth;
                    },
                    isotope = function () {
                        $container.isotope({
                            resizable: false,
                            itemSelector: '.thumbnail',
                            masonry: {
                                columnWidth: colWidth(),
                                gutterWidth: 4
                            }
                        });
                    };
                isotope();
                $(window).smartresize(isotope);