Isotope

[kaiquemix 1]

Olá galera estou tentando fazer uma trava onde só apareça 18Blocos. Pois depois vou fazer um botão que carregue +18 blocos cada vez que é clickado, sendo que Cada bloco é pego no banco de dados e o botão vai ser feito com AJAX.

 

Oque eu quero: Fazer aparecer somente 18 Blocos em vez de todos que são puxados do Mysql

 

 

      var $container = $('.grid'),
                    colWidth = function () {
                        var w = $container.width(), 
                            columnNum = 6,
                            columnWidth = 0;
                        if (w > 1200) {
                            columnNum  = 6;
                        } else if (w > 900) {
                            columnNum  = 3;
                        } else if (w > 600) {
                            columnNum  = 3;
                        } else if (w > 300) {
                            columnNum  = 3;
                        }
                        columnWidth = Math.floor(w/columnNum);
                        $container.find('.element-item').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,
                                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,
                            masonry: {
                                columnWidth: colWidth(),
                                gutterWidth: 3
                            }
                        });
                    };
                isotope();
                $(window).smartresize(isotope);
    
    
      var $grid = $('.grid').isotope({
    itemSelector: '.element-item',
    layoutMode: 'fitRows',
          
  });

HTML + PHP para entender o codigo:

 

 

<div class="grid">
     
      <?php
$servidor = 'localhost';
$banco      = 'apixel_galeria';
$usuario  = 'root';
$senha    = '';
$link     = @mysql_connect($servidor, $usuario, $senha);
$db          = mysql_select_db($banco,$link);
if(!$link)
{
    echo "erro ao conectar ao banco de dados!";exit();
}


$sql = "SELECT * FROM portfolio ORDER BY id DESC";
$query = mysql_query($sql);


while($sql = mysql_fetch_array($query)){
$id = $sql["id"];
$nome = $sql["nome"];
$tipo = $sql["tipo"];
$desc = $sql["desc"];
$menu = $sql["menu"];
$imageM = $sql["imageM"];
$imageF = $sql["imageF"];
    ?>
          <div class="element-item <?php echo "$menu";?>" data-category="transition">
       <a href="#portfolioModal54" class="portfolio-link" data-toggle="modal">
                                <img src="<?php echo "$imageM"?>" alt="project 2">
             <div class="mask">    <div class="conteudo_mask" style="
    transform: translateY(-50%);
    top: 50%;
    position: relative;
    /* float: left; */
    ">                   <h1><?php echo "$nome"?></h1>                   <div id="lin" style="
    width: 200px;
"></div>                   <h2><?php echo "$tipo"?></h2>                                                    </div><h3 style="
    transform: translateY(-50%);
    top: 50%;
    position: relative;
">VEJA <br><img src="images/mais.png" alt="mais" style="width: 20px;height: 19px;margin-bottom: -1px;margin-top: 3px;"></h3></div>
                                </a>
  </div>
        
        <?php
}
?>
</div>