Databases
StackOverflow2013
Postsdbo
POJQuery Masonry breaks after first image, loads with strange gaps
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery Masonry breaks after first image, loads with strange gaps
    text
    copied!<p>I'm implementing Masonry with Infinite Scroll on a Tumblr theme -- something I've successfully done before, but I just can't get this one to stop "breaking" and scattering the images around. Getting desperate!</p> <p>Live demo at <a href="http://neuraldamage-theme4.tumblr.com" rel="nofollow">neuraldamage-theme4.tumblr.com</a> (password is guest).</p> <p>I've tried removing everything from the body tag except for the #posts div and its contents (and of course the script), but the problem persisted -- so it seems like this shouldn't be an issue with the surrounding divs.</p> <p>Here's my script:</p> <p></p> <pre><code>$(document).ready(function() { $('#post-video iframe').attr('width', '300'); // resize embedded videos }); var $container = $('#posts'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.post', columnWidth : 300 }); }); $container.infinitescroll({ navSelector : '#pagination', // selector for the paged navigation nextSelector : '#pagination li a.pagination_nextlink', // selector for the NEXT link (to page 2) itemSelector : '.post', // selector for all items you'll retrieve loading: { finishedMsg: '', img: 'http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif', // http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif, http://static.tumblr.com/6u5yyqj/yWkmgj1jq/loadingdark.gif } }, // trigger Masonry as a callback function( newElements ) { var $newElems = $( newElements ); $container.masonry( 'appended', $newElems ); } ); </code></pre> <p></p> <p>And here's what I have embedded, just made sure it was all up to date:</p> <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://static.tumblr.com/6u5yyqj/MPKmktfkv/jquery.masonry.min.js"&gt;&lt;/script&gt; &lt;script src="http://static.tumblr.com/6u5yyqj/nsQmkth3k/jquery.infinitescroll.min.js"&gt;&lt;/script&gt; </code></pre> <p>And if you'd like to see the full code: <a href="https://gist.github.com/neuraldamage/5307289" rel="nofollow">gist.github.com/neuraldamage/5307289</a></p> <p>If anyone could take a crack at this, I'd be greatly appreciative!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload