title: In Tumblr, how to remove vertical gap in masonry and make infinite scrolling work with it??
body: <p>It is my first using stackoverflow. The following problem drove me insane for past few days. I really hope to find some help from here. </p>
  
  <p>I am currently creating my own Tumblr Theme. I am using Masonry and today I got it work with infinite scroll. But I encounter following problems.</p>
  
  <p>my Tumblr site is <a href="http://bojagicollection.tumblr.com/" rel="nofollow">http://bojagicollection.tumblr.com/</a> I am using chrome. </p>
  
  <ol>
  <li><p>there is a vertical gap between images and a small portion of image is placed on the top of next image. I set no margin nor padding. However I gave each container percentage width(25%)... I really want to get rid of white space and arrange them in an accurate manner.</p></li>
  <li><p>Regarding contents show up after I scroll down to the point where infinite scrolling kicks in. As you can see, I add hover effect on each container, however it only applies to the containers that are displaced in an initial page. The effect does not work on the containers that appear with infinite scrolling effect.. how can I add same effect to those?</p></li>
  </ol>
  
  <p>your help will be much appreciated. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  {block:Description} &lt;meta name="description" content="{MetaDescription}" /&gt; {/block:Description}
  
  &lt;title&gt;{block:TagPage}{Tag} - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}&lt;/title&gt;
  
  &lt;link rel="shortcut icon" href="{Favicon}"/&gt;
  &lt;link rel="alternate" type="application/rss+xml" title="{Title} RSS" href="{RSS}"/&gt;
  
  &lt;link rel="stylesheet" href="http://static.tumblr.com/fwamms6/ZFamvxw9s/reset.css" /&gt;
  
  
  &lt;style&gt;
  
  body {
      background-color: white;
      color: black;
      font-family: "arial"";
      font-size: 1em;
  }
  
  a {
      color: blue;
      text-decoration: none;
  }
  h1, h2, h3, h4, h5, h6 {
      font-weight: normal;
      letter-spacing: 0.1em;
      text-transform: uppercase;
  }
  
  p {
      color: black;
      font-size:1em;
  }
  
  ul {
      list-style: none;
      margin:0px;
  }
  
  li {
      display: block;
      margin-left:0px;
  }
  
  img {
      max-width:100%;
  }
  
  
  
  
  //layout//
  
  #content {
      width:100%;
  }
  
  
  .container{
      width:25%;
      float:left;
      overflow:hidden;
      padding:0;
  }
  .caption {
        position: absolute;
        top: 0;
        left: 0;
        background-color:black;
        opacity:0.2;
        width: 100%;
        height: 100%;
  }
  
  .captiona {
        display:none;
        position: absolute;
        top: 0;
        left: 0;
  }
  
  
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;header id="masthead"&gt;
          &lt;img src="{PortraitURL-128}"/&gt;
          &lt;h1&gt;&lt;a href="/" title="{lang:Home}"&gt;{Title}aab&lt;/a&gt;&lt;/h1&gt;
  
      &lt;/header&gt;
  
  
  &lt;div id="content"&gt;
  
  
      {block:Posts}
      &lt;div class="container"&gt;
      &lt;div class="caption"&gt;
          &lt;ul&gt;
  
  
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="captiona"&gt;
          &lt;ul&gt;
  
              &lt;li&gt;{LikeButton color="black"}&lt;/li&gt;
              &lt;li&gt;{ReblogButton color="black"}&lt;/li&gt;
               &lt;li&gt;{block:Caption}{Caption}{/block:Caption}&lt;/li&gt;
              &lt;li&gt;{block:PostNotes}{PostNotes} {/block:PostNotes}&lt;/li&gt;
              &lt;li&gt;{block:ContentSource}
      &lt;a href="{SourceURL}"&gt;
      a
      &lt;/a&gt;
  {/block:ContentSource}&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
          {block:Photo}
  
              {LinkOpenTag}&lt;img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" /&gt;{LinkCloseTag}
  
  
          {/block:Photo}
  
  
  
       &lt;/div&gt;
      {/block:Posts}
      {block:Pagination}
  
          &lt;nav class="pagination"&gt;
             {block:PreviousPage}&lt;a href="{PreviousPage}"&gt;Previous page&lt;/a&gt;{/block:PreviousPage}
             {block:NextPage}&lt;a href="{NextPage}"&gt;Next page&lt;/a&gt;{/block:NextPage}
          &lt;/nav&gt;
          {/block:Pagination}
  &lt;/div&gt;
  
  
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://static.tumblr.com/fwamms6/W8tmvy2eq/imagesloaded.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://static.tumblr.com/fwamms6/F9lmvy2fb/masonry.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://static.tumblr.com/fwamms6/WZfmvy2gd/jquery.infinitescroll.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  $(function(){
  var container = $('#content');
  
  container.imagesLoaded( function(){
      container.masonry({
          itemSelector : '.container'
      });
  });
  
  container.infinitescroll({
        navSelector  : '.pagination',    
        nextSelector : '.pagination a',
        itemSelector : '.container',
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/6RMhx.gif'
          }
        },
        function( newElements ) {
          var $newElems = $( newElements ).css({ opacity: 0 });
          $newElems.imagesLoaded(function(){
            $newElems.animate({ opacity: 1 });
            container.masonry( 'appended', $newElems, true ); 
          });
        }
      );
  });
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
          $(window).load(function () {
  $('#content').masonry({
  itemSelector : ".container",
  },
  function() { $('#content').masonry({ appendedContent: $(this) }); }
  );
  });
      &lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $('.container').hover(
              function(){
                  $(this).find('.caption').fadeOut(250);
              },
              function(){
                  $(this).find('.caption').fadeIn(250);
              }
          );
    });
  
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $('.container').hover(
              function(){
                  $(this).find('.captiona').fadeIn(250);
              },
              function(){
                  $(this).find('.captiona').fadeOut(250);
              }
          );
    });
  
  &lt;/script&gt;
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>