Masonry - 100% first item

by Reusablecode

HTML

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<div class="wrapper">
    
    <div class="container">        
        
        <div class="nav"></div>
        
        <div class="item" style="height:320px";></div> 
        <div class="item" style="height:410px";></div> 
        <div class="item" style="height:200px";></div> 
        <div class="item" style="height:180px";></div> 
        <div class="item" style="height:280px";></div>
        <div class="item" style="height:320px";></div> 
        <div class="item" style="height:410px";></div> 
        <div class="item" style="height:200px";></div> 
        <div class="item" style="height:180px";></div> 
        <div class="item" style="height:280px";></div>
        <div class="item" style="height:320px";></div> 
        <div class="item" style="height:410px";></div> 
        <div class="item" style="height:200px";></div> 
        <div class="item" style="height:180px";></div> 
        <div class="item" style="height:280px";></div>

    </div>
</div>

CSS

article, aside, details, figcaption, figure, footer, hgroup, section { display: block; }
[hidden] { display: none; }
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

/* Links ----------------------------------------------------------------*/
*{ margin: 0px;}
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }


/* Structure ----------------------------------------------------------------*/
body{background-color:#f8f8f8;}
.wrapper{ height: 2000px; max-width:1140px; margin:0 auto; background-color: white;}
.nav{ height:200px; width:100%; margin:0 auto 20px auto; background-color: blue;}
.container{ width:940px; margin:0px auto;}
.item{margin-bottom: 20px; width:220px; background-color:#cecece; float:left;}

.container {
  padding-top: 220px;
}

.nav {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

$(function(){
    
    $('.container').masonry({
      itemSelector: '.item',
      columnWidth: 220,
        gutterWidth: 20,
      isFitWidth: true,
      isAnimated: true,
      animationOptions: {
        duration: 150
      }
    });
      
  });