CODEWITHSUNDEEP
javascriptphpjquerycssjquery-masonry
pinksharpii
pinksharpii

Reputation: 527

How to not get Masonry to load all divs at once

I've used the jQuery Masonry on tumblr for a while now so I thought I'd use it on my portfolio site to load in my photography. But I'm not finding anywhere that explains how to have sets of them load in as the user hits the bottom of the page. Am I supposed to use a pagination to control that?

I have the simplest of masonry js right now.

$(document).ready(function() {
  $('#pics').masonry({
   columnWidth: 379,
   itemSelector: '.cell'
  }).imagesLoaded(function() {
   $('#pics').masonry('reload');
  });
});

Also, even though I have a div at the bottom set to clear: both, the #pics div is only as large as the page itself, not expanding to fit all my pictures (because they're floated left). But none of the ways I've seen to "trick" the parent div into expanding to fit all of its floated child elements have worked. I have a feeling it's because I'm loading them in via php rather than directly in the html.

So, they're all there, all the pictures, just only 5-ish are seen while the rest are chopped off visibly. And I'd like to not load in 200 pictures at once.

Upvotes: 0

Views: 67

Answers (1)

Pradyumna Challa
Pradyumna Challa

Reputation: 1145

Did you try the appended method documented here . It should do the job for you .

Upvotes: 1

Related Questions