1

When I use the masonry appended method the appended items all have their "left" attribute calculated as "0" resulting in all items being displayed in a single column. doing a masonry('reload') rearranges everything correctly but it will be a resource hog to do it everytime a new item loads.

Also it is animating from the top even though it should be doing it from the bottom.

My code is as follows:

Initially:

$('.pinboard-list').masonry({
    itemSelector : '.grid-item'
});

Then for each item

function renderitems(){
    boxes = $(html);
    $('.pinboard-list').append(boxes).masonry('appended',boxes,true);
}

Am I missing something obvious?

Edit

JS Fiddle

http://jsfiddle.net/LTFG8/1/

Matthew Dolman
  • 1,622
  • 6
  • 24
  • 46
  • What is in `$(html)` ? I would recommend setting up your code in a jsfiddle to make it easier to debug for us (as well as making sure the code is separated from the rest of the application). – Anders Arpi Sep 19 '12 at 08:18
  • html is a string of html code that I want to append. It is wrapped in the $() to make it a jQuery object which is required for the $content parameter of the appended method. – Matthew Dolman Sep 19 '12 at 08:19
  • Yes - what I'm curious about is what the actual HTML code is. :) – Anders Arpi Sep 19 '12 at 08:27
  • I have added a jsfiddle link to the question – Matthew Dolman Sep 20 '12 at 06:50

2 Answers2

3

You need to use the imagesLoaded method as shown in the documentation - Masonry (and Isotope, for that matter) needs the width and height of newly appended or prepended or inserted images to lay out correctly, retriggering with a callback. There are many similar questions and answers on SO showing how to go about this. Look at the demo here with Chrome's devtools.

Systembolaget
  • 2,494
  • 2
  • 18
  • 37
  • I have fixed the width and heights of the images in the CSS...would this still be necessary? – Matthew Dolman Sep 19 '12 at 13:26
  • You need to specify the width and height in your HTML, whether hard-coded or constructed at runtime. With CSS you can only style the image or whatever element you're loading. – Systembolaget Sep 19 '12 at 14:04
  • Hard coding HTML attributes height and width on the .grid-item element still does not fix the problem – Matthew Dolman Sep 20 '12 at 06:48
  • You're filling your #container with .masonry-bricks in a very unusual way, appending items to an empty container; if you hard-code the image dimensions in the html (which you did not in your fiddle and of course don't want to do for dynamic loading and then appending) or you use imagesLoaded and Masonry callback as shown in the documentation, it does work. Maybe see callback http://stackoverflow.com/a/10708377 or revisit http://jsfiddle.net/desandro/RXDL4/ and http://jsfiddle.net/LTFG8/1/ – Systembolaget Sep 20 '12 at 07:11
  • Maybe I am going around this wrong but I want to be able to clear the contents of a container and reload items based on some input by the user. Surely I would be starting with an empty container to accomplish this? Hard coding image widths and height still does not fix it in this one http://jsfiddle.net/LTFG8/2/ The fiddle you provided is not using the appended method. I have no problems if I use reload. – Matthew Dolman Sep 20 '12 at 07:23
1

Thanks @Systembolaget for the clue. There needed to be something within the container already for the appended method to work. Adding something like this fixed it:

<li class="grid-item">&nbsp;</li>

Fixes it

Matthew Dolman
  • 1,622
  • 6
  • 24
  • 46
  • Just out of interest - why do you load items in an unordered list and not the "regular" way? Meaning - you obviously see there is a benefit doing it like that? Reason: I have never implemented Masonry or Isotope this way, but maybe that's a good idea to take on board in some situations... – Systembolaget Sep 20 '12 at 09:56
  • There is some javascript which is used elsewhere on the site which relies on ul li selectors and rather than rewrite the script it is easier to adapt my page to fit the script...thanks for your help anyway – Matthew Dolman Sep 20 '12 at 11:18