Member Avatar for spyece

Hello, This is my first tumblr theme attemt and this is what i have got so far, the masonry is working on the main page, but when the infinite scroll jquery plugin loads the second page the sorting acts funny, here are the urls →

Live Url :
Complete Code :

This is my first theme attempt and the only issue i am not able to resolve myself is the masonry positioning on infinite scrolling. i would really appreciate if someone could help me out here.

Thanks in advance.

Edited by spyece
  • 2 Contributors
  • 2 Replies
  • 282 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by lambing

Dani AI

Generated

Short version: the jumpy sorting usually means the items Infinite Scroll adds aren’t being treated as the same “bricks” Masonry expects (wrong markup/wrapping, different sizing, or layout running before sizes are known). is on the right track — Masonry needs to be run when new elements arrive — but a few Tumblr-specific checks and a slightly different pattern often fixes the problem reliably.

  • Verify the exact DOM you get back. New posts must have the same item class/structure and must be appended as siblings inside the Masonry container. Infinite Scroll responses are sometimes wrapped in an extra container; that makes Masonry treat the whole batch as a single item.
  • Double-check item CSS. Consistent width, box-sizing, margins and an explicit rule like img { display:block; max-width:100%; } avoid size shifts. If your grid items depend on content height, make sure that content (images/iframes) reports its final size before layout runs.
  • Watch for version/API mismatches. Masonry and Infinite Scroll change method names and behaviors across major versions — call the methods that match the versions you’ve included.
  • Debugging tips: disable CSS transitions while testing, log the nodes returned by the infinite callback, and check the console for JS errors.

A robust pattern that doesn’t rely on external helpers is to wait for the images in the new nodes to finish loading, then append and force Masonry to refresh. Example:

var $grid = $('#posts');

$grid.infiniteScroll({ /* options */ }, function(html) {
  var $nodes = $(html).filter('.post'); // pick the right node selector
  var imgs = $nodes.find('img'), left = imgs.length;

  function finish() {
    $grid.append($nodes);
    $grid.masonry('reloadItems');
    $grid.masonry('layout');
  }

  if (!left) return finish();
  imgs.on('load error', function() { if (--left === 0) finish(); });
  setTimeout(finish, 1200); // safety fallback
});

Extra: append new items hidden (opacity:0) and reveal them after layout to avoid visible jumping, and if problems persist reduce to a minimal static test page (append a few identical post blocks by hand) to isolate whether the issue is markup, CSS, or plugin interaction.

Recommended Answers

All 2 Replies

Member Avatar for spyece

Anyone? Please .. :)

Member Avatar for lambing

you should trigger the plugin masonry again to resort the page. you can specify a callback function for infinite scroll

e.g.

    $('element').infiniteScroll({}, function(newElements) {
      // newElements are the set of elements fetched after ajax call
      // you may retrigger masonry to resort the new set of elements added.
      var $newElements = $(newElements);
      $newElements.imagesLoaded(function() {
        $newElements.masonry('appended', $newElements, true);
      });
    });

I hope this helps.

Edited by lambing
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.