It works beautifully on screen, but when it gets printed, the floated elements all hop on top of each other, making a big mess.

It's possible to get filtering to work with infinite scroll, but the layouts gets very broken. Issues:

1. boxes are only masoned within their page
2. masonry doesn't gather boxes together when filtered, it leaves them in their original locations.

I'm trying to use masonry in a bookmarklet that displays images in an overlay over an existing page. the problem is that all the brick are being placed below the old content on the page (even though I'm only targeting the image wrapper for my images, which sits above the content. any idea how I can resolve this, so masonry will ignore the content already on the page? thanks!

(apologies if I'm not using the right forum for this - I've just been banging my head against the wall trying to solve this issue).

Hey hey,

Great plugin that I've been meaning to test/learn since I discovered it.

The issue I face is that I am setting up my page so all of my elements are in a specific order. I'm noticing that Masonry is re-ordering the elements when it positions them. The end result that I am hoping to achieve is this:
http://jacobdubail.com/jacobdubail/examples/test/images/good.png

but what I'm getting is this:
http://jacobdubail.com/jacobdubail/examples/test/images/bad.png

Is this normal? Is there a way to override this feature?

Thanks,
Jacob

Hello!

Firstly, thanks for Jquery Masonry. It's awesome and has worked perfectly, up until now that is.

I'm trying to get the calendar items on my website to filter by their category. You can see it here: http://events.joydropper.com/.

I put in the scripts and changed everything so that it applies to my div classes and ids. However, when the category buttons are clicked, it looks like Masonry breaks. The appropriate items are made invisible, but nothing is resorted properly.

This is only a problem with the actual category items, and doesn't happen on the initial page load or when someone filters by "all."

Thanks in advance for any help with this!

Seems to be issues when using @font-face... instead of trying to explain it here... i did a quick screencast on the problems... http://screenr.com/prp

Thanks!

Help. I am using a php cms and also phpthumb to generate thumbnails. everything works fine on first load but when I click on my logo which is just a link to my site the thumbnails stack on-top of each other. Any help would be very appreciated!!! This problem isn't occurring in firefox on mac but definitely in safari and also chrome.

www.codyhamilton.us

Spent a good hour looking through the masonry code to try and find where/why this happening and can't work it out so I'm hoping someone here will have come across this issue.

The problem is as follows, on my page I have a Google Map, beneath is a list (li elements inside of a ul of course) of all the markers on the map (and various bits of information, like name, address, phone number etc.) the problem I am having is that when masonry reorders the list items it seems to be removing the z-index of the parent (in this case the ul).

Has this issue arisen before? Is there a simple work around?

Thanks,

Stewart

Using the following code on a Drupal site, I experience crashes on Chrome when pages are loaded that don't have the .brick div element.
$(window).load(function() {
$('#pagecontent').masonry({ itemSelector: '.brick', resizeable: 'false', saveOptions: 'false' });
})
Note, I've chosen to load the jquery.masonry.js and insert the javascript by hand in my theme files rather than using a contributed module or using a module to load the script.

Hello,

I've found a bug which prevents jQuery Masonry from being usable unless you already start the wrapper area with some content inside.

To demonstrate the issue, I've set up a project with instructions on the readme document on how to replicate.

Resize event call twice in ie.
jQuery 1.4.2 problem?

Hi,

I need to apply extra jquery actions after masonry have rearranged the boxes, I don't know where I can paste my code in your plugin.
Right now I have to resize screen one more time for my code to be run...
I d'like this to be run every time boxes get rearranged.
Thank you

Hi.

I am using the masonry plugin inside a layout maded by the layout plugin. I test the resizable feature work fine with the divs are located in a single page but when use in the center panel of the layout of the layout plugin, then not resize nothing.

Thanks.

First of all: Great jquery plugin! Really easy to use and to modify. I just have one problem which I can't solve. In the grid of all the div boxes I want a single div box stick to the upper right corner. The other div boxes have to float "around" and not affect this box in the upper right corner. I hope this question is clear enough. Otherwise I can always upload a image to make it more clear.

Cheers and thanks!

Hello, please forgive me if this is a bad spot for this kind of question.
I am trying to figure out why this is happening:
http://img222.imageshack.us/img222/8043/masonry.jpg
Clearly, number 9 could go under 1
Is it because of the order in which these divs are loaded (they're numbered in that order)?
If so, what can be done before Masonry starts to "arrange" block so that number 9 goes under number 1?
Thanks a bunch in advance!

Hello,

I am using Masonry with Tumblr so I have the issue as everyone know/ stated in the Primer page of the demo. The effect only comes in after everything is loaded. How can I solve this or display a spinning icon while the content is being loaded.

Thanks

I've been able to get masonry working with jquery.ui.sortable and jquery.ui.resizeable all at the same time.

In my case, it required the following:

• Setting the option columnWidth to 1.
• Giving all my sortable objects a specific class. (i.e. class='test')
• Assigning the masonry option itemSelector to that class. (i.e. itemSelector: '.test')
• Assign the same class to the generated sortable placeholder.
• Remove that class from the helper object, and the item selected.
• Re-apply that class to the item selected once dropped.
• Re-run jquery.masonry on the sortable's sort option.
• Re-run jquery.masonry on the sortable's stop option.
• Re-run jquery.masonry on the resizeable's resize option.

No changes to the actual code was needed.

*Tested in Chrome (fast - no performance hit), IE8 (slow, but works), Firefox (fast)

Hello,

I've been troubleshooting my Masonry installation but can't seem to figure out why it works in Safari but not Chrome or Firefox. I thought perhaps it was because of the new HTML5 elements I'm using, so I stripped them out and used divs with IDs and even classes but it didn't help.

Has anyone else had experience with this?

You can see what I'm doing here: http://signyourbikeout.com/articles

Thanks,
Paul

I'm using Vollkorn with Masonry, and I get a broken layout if I call masonry when $(window).ready. I assume this is because Masonry doesn't yet know the metrics of the Vollkorn font. Is there a way to fix this?

Hi,
thank for this amazing...

When i want put the wall in a fixed div :
in firefox (3.6), masonry re-arange the box in one column and the scroling working.
in ie (6-7), masonry dont care the height div and scrolling don't work
There is a way to fix it in firefox ? (I want work it in local using firefox)
Note : i am using Filtering hashes.

html :

css :

demo{

overflow-y : scroll;
height:450px;

}

sorry for my english.

Thank a lot !

hey david.

love your plugin man. having some issues with a site i'm building. i followed an issue that seemed like it would work - http://github.com/desandro/masonry/issues/closed#issue/24 - but alas it hasn't solved the problem. take a look at the page i'm building - http://www.saskiamoore.com/projects.html - as you can see i want the bottom row to nest in with the top row. it's not happening. can you enlighten me to how to work with variable (2) heights in a single column like that? the first two elements nest in beautiful but then it becomes weird. i took at look at the page in firebug and it is strange the order that occurs...any help is much appreciated. thanks for all your work man..

peace,
Miles

firefox OK, IE7&8 OK.

but all of my divs were simply arranging in a vertical column with style="position: absolute; left: 0px; top: XXXpx;"

give those divs a float:left; and they get masoned properly in chrome/safari.

I am having a hard time figuring this out and I really dont know what else to do!
I am trying to avoid the boxes overlapping when the window loads using $(document).ready (function) { also trying $(window).load(function(){ but no results.
for some reason $(window).load(function(){ doesnt seem to call masonry. I am using wordpress as the cms

Also I am using the filter feature option and It seems to re arrange the boxes when the ALL category is clicked just fine. But I would like the window to load with the boxes masoned*

Thanks to any help I can get on this in adavance!

I made a Wordpress theme using Masonry, but each time I load a page the divs overlap. When I refresh the page, everything loads normal. If I click to my archives or browse to view older pages, the overlapping occurs again. Is there any way I can prevent this?

PS: I also made a tumblr theme with masonry and the same thing happened, so I don't think it has anything to do with Wordpress in particular. Maybe I am just missing something.

The new Version doesn't work in Internet Explorer, the older Version 1.2.0 does. Any clue?

When boxes are hidden while filtering, links inside them are still active

Very cool script and very powerful. I would love to see if it's possible to also create an auto pagination function. Instead of autoscroll I would like to either set a fixed height or fixed number of posts so modules would also fit then any overflow would go to another page. Any help or pointers would be appreciated.

Masonry is working great in IE now. Thanks for the update!

The only place it doesn't like to work is with ajax-loaded content ;-(

I'm using Ben Alman's HashChange plugin to load images that get positioned with Masonry. It works everywhere except IE. I'm not really sure that this is really an issue with Masonry, but wanted to post it here to see if anyone has tried to use these 2 great plugins in concert. You can see what I mean at a site I'm working on at http://daniellehendrix.com

Thanks for any insight you may have.

does the infiniteScroll works on iphones and ipads?
Is not working for me on them.
Do i have to add some code to display all content on load if users visit the site on Macs gadgets?
thanks in advance :)

Hi. I'm experiencing great problems with the masonry plugin and IE7. Everything get stuffed together, and when I look into the code, the items doesn't get styled (absolute positioning etc.) like in other browsers...

See screenshots from IE7 – both from the official site and the one I'm developing;
http://dl.dropbox.com/u/1134061/ie_01.png
http://dl.dropbox.com/u/1134061/ie_02.png

I thought this was compatible with IE7?

Thanks..

Bjarne

hi,
is it possible to have everything floating to the right so it can be used in a right-to-left language layout (such as hebrew)....

i tried it with the vgrid script and it was easy enough to get the right float, but this masonry script is much better documented and has filtering which i need for my project... now if only i can get right-to-left alignment :)

cheers

dog

Hi, is it possible to use Masonry to fit X number of same-height images into a sidebar div, based on the height of the main content div? That is, on a page with a lot of long text content, load a dozen images into the sidebar, but on a short content page only load 3?

Thanks, even if this isn't possible, I can imagine a lot of great uses for Masonry.

Hi,
Is there any way to make Masonry avaiable in a horizontal way?
I mean, to position divs setting max height not max width?
Thank you.
Masonry is remarkable.

(This is a question about adding a so-called fluid layout component. The FAQ entry apparently on that topic does not do that.)

I’d like to vary both the column width and number of columns simultaneously as the window is resized. The goal is to always use the whole screen while keeping each column a reasonable number of chars wide. Is that possible?

For instance, suppose you want as many columns as possible that are at least 200 pixels wide. If the screen was 900 pixels wide, you want 4 columns each 225 pixels wide. If W is the screen width, then the number of columns would be floor(W/200) and each column’s width W/floor(W/200).

Thanks.

Hey David, great plugin by the way!

I am using masonry in Ruby on Rails app where using ajax I update and replace the masonry content. At first I would just call the masonry init line again but after I updated the content with ajax and tried to resize, the masonry content would flash while the window was being being resized then would appear kind of rearranged but not stacked close together as it was on the initial page load.

Next I tried using code similar to your append example in the docs after the ajax update was complete.
$('#masonry_container').append($('div.brick')).masonry({ appendContent: $('div.brick') });

This got rid of the flashing during window resize and the bricks are a lot closer than they were after the ajax without the "appendContent" option.

I am just wondering if it's possible to animate and append content?

Many thanks in advance,

Chris

Can anyone confirm if they have used infinitescroll and filtering at the same time with any success?
Thanks for an amazing plugin by the way, one of the best I've used.

This was the only place I could think of to ask for help, but, I'm trying to make my Tumblr theme work with masonry.js, and all that's happening is a small column to the left of the page is being made.

Here is my code, in the order of JavaScript, HTML, and CSS:

< script type = 'text/javascript' src = 'http://static.tumblr.com/c427a2a/gGNl6h94x/jquery-1.4.2.min.js'> </ script >
< script type = 'text/javascript' src = 'http://static.tumblr.com/c427a2a/HxNl6fwva/jquery.masonry.js'> < / script >
< script type = "text/javascript" >
$ (function(){
$ ('#section'). masonry({
single Mode: true,
item Selector: '. post'
});
});
< / script>
(Spaces were put so the code would show up)

<div id='section'>
{block:Posts}

{block:Text}
<div class='post text'>
  {block:Title}
    <h3><a class='post-title' href='{Permalink}'>{Title}</a></h3>
  {/block:Title}
    {Body}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div> 
{/block:Text}

{block:Photo}
<div class='post photo'>
  {LinkOpenTag}<img src='{PhotoURL-500}' alt='{PhotoAlt}'>{LinkCloseTag}
    {block:Caption}
      {Caption}
    {/block:Caption}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Photo}

{block:Photoset}
<div class='post photoset'>
  <img src='{Photoset-500}' alt='{PhotoAlt}'>
    {block:Caption}
      {Caption}
    {/block:Caption}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Photoset}

{block:Quote}
<div class='post quote'>
  <h3 style='display: block'><a style='display: block' class='post-title' href='{Permalink}'>“{Quote}”</a></h3>
  {block:Source}
    <p>- {Source}</p>
  {/block:Source}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Quote}

{block:Link}
<div class='post link'>
  <h3><a class='post-title' href='{URL}' {Target}>{Name}</a></h3>
  {block:Description}
    {Description}
  {/block:Description}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Link}

{block:Chat}
<div class='post chat'>
  {block:Title}
    <h3><a class='post-title' href="{Permalink}">{Title}</a></h3>
  {/block:Title}
  {block:Lines}
  <ul class='chatlines'>
  <li class='lines{Alt}'>
    {block:Label}
      <span class="label"><strong>{Label}</strong></span>
    {/block:Label}
   {Line}
  </li>
  </ul>
  {/block:Lines}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Chat}

{block:Audio}
<div class='post audio'>
  {AudioPlayer}
  {block:Caption}
    <p>{Caption}</p>
  {/block:Caption}
  {block:IfShowAlbumArtOnAudioPosts}
  {block:AlbumArt}
  <img src='{AlbumArtURL}' alt='{block:Artist}{Artist}{/block:Artist} - {block:TrackName}{TrackName}{/block:TrackName}'/>
  {/block:AlbumArt}
  {/block:IfShowAlbumArtOnAudioPosts}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Audio}

{block:Video}
<div class='post video'>
  {block:Caption}
    <p>{Caption}</p>
  {/block:Caption}
  {Video-500}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Video}

{block:Answer}
<div class='post answer'>
  <h3 class='question'>{Asker} asked me, “{Question}”</h3>
    <p>{Answer}</p>
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
</div>
{/block:Answer}

{/block:Posts}
{block:IfDisqusShortname}

{/block:IfDisqusShortname}

</div>



  #section {
    width: 960px;
    word-wrap: break-word;
  }

  div.post {
    width: 300px;
    background-image: url(http://static.tumblr.com/c427a2a/4iHl5b98u/diagonal_lines_lol.png);
    padding: 10px;
    margin: 15px 10px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    box-shadow: inset 0 0 3px #000;
    -webkit-box-shadow: inset 0 0 3px #000;
    -moz-box-shadow: inset 0 0 3px #000;
  }

Thanks for this plug in David, it's pretty cool. I was having a problem similar to this guy...

http://github.com/desandro/masonry/issues/unreads#issue/23

...but I saw he upgraded to version 1.3.1 and it resolved the problem, I did the same and it sorted the problem, however it seems to have come back for some reason. The boxes overlap on first page load, when you set the filter to show all they all go into place perfectly, it's just the initial layout on page load where all the boxes overlap on one horizontal line. There is a live URL of the problem here

http://stephenrobertskinner.com/work

I'm on a Mac using latest builds of Chrome and Firefox and the site runs through Expression Engine.

Thank you for any help!

First off - this is an amazing script, its so beautiful.

But I can't for the life of me figure out why this isn't working, I think it might be clashing with another jquery plugin but I can't figure out which one it is. I have set up a test page and if you click the button in the middle column you will be able to see the error - opts.$brickParent.find is not a function.

http://ninthdesign.co.nz/my/test.php

Any suggestions?

Cheers,
Michael

Masonry layouts break when you zoom or resize text in the browser.

See example here (2:50) http://screenr.com/prp

Quick point:

The FAQ about disable masonry should also mention the need to remove the $.data() for masonry as well. Otherwise, things get wonky if you try to re-apply masonry later.

Longer point:

I don't see disabling/removing as an edge case. The primary example (and the one I need it for) is for switching views on the same data, i.e., switching between a list view and grid (masonry) view. Now, I understand that it would be very difficult to completely undo masonry without potentially stepping on something else (another plugin, or some custom stuff). However, I think there are a few things that could be done.

One idea is to add a disable() method to masonry, that takes care of event and data management. It's a pretty brittle solution to manually remove these things. For example, what if masonry changes what it calls the events or the data? My disabling code becomes broken.

The bigger issue (and the one that could step on other plugins or user code) is resetting styles. However, why can't you set the current element styles ( with attr('styles') ) to a data attribute on the element? Then, on disable, you could just set it back. I realize it's not perfect (what about styles added after the initial masonry binding?), but I think it's workable and more easily explained.

Is this bad? Why?

I'm having trouble where this page doesn't seem to be getting arranged as expected... it looks like common floats. I just can't seem to figure out what's going on. I've broken the page down to a simple example: http://gist.github.com/570057

Hi

I have just installed this awesome piece of code in a joomla site of mine:

It works nicely in Chrome, Safari and Firefox,

but not in IE9 and Opera (10.63)
have not tested any other explorer or opera versions though.

In IE9 and Opera it does not seem to figure out the correct with for the container which holds the "boxes".

Take a look at this page here to se what happens.
http://www.monsanto.no/index.php/en/environmental/gmo/gmo-news

In IE9 and Opera it show the article teaser boxes in three columns, so the last column is partly behind the right menu.

Could anybody please explain to me why this happens?

Having an issue with this in IE (all versions). The elements are all being placed on top of each other.
Reverting to v1.1.3 works.

edit. It seems that the style top for the elements is being passed a value of "-infinitypx"

I have to types of boxes () within the container that i'm using masonry on. all divs are the same width (180px) and there are 5 cols each item has either a large or small height image and this alternates along the rows so its always large, small, large, small, large.

this is fine to start with but when filtering they can end up large, small, small, large, large etc

how can i get them to appear in the order i want but still animate the ordering using masonry?

https://github.com/gilmoreorless/masonry/commit/e88114d2b0825c47f57e31e50abc62dd336d78be

you list this on your site; it is a fantastic addition. Would you consider adding it to the core base?

thanks

I am not sure what is going on. I am using the WP theme from here: http://shakenandstirredweb.com/themes/

If you look at the page I put together: v1.pedrogomez.com, when you resize the page, the images do not re-shuffle correctly, rather it goes into two columns when there is plenty of room for a third column. Any thoughts?

Thanks for your help.
-pg

Hi

I realised in Masonry FAQ page there's a fork by kvnsmth that does this. But if I'm not wrong, that code is based on a much older Masonry version.
How do I implement this on the latest Masonry version?

Thanks heaps!

(FYI I'm a complete newbie at this and Masonry is really cool! )

Hi !
After first upload of web page http://makler.if.ua/ Google Chrome sticks all of the brick together, zoom-in-zoom-out in browser fix this problem. Please help me to find a solution for the best perfomance. Thank you.

hello, first of all nice work! I love to lib, thanks for this!
when you updated from 1.3.0 to 1.3.1 (because of the explorer issues) i noticed a new thing
compare these urls
1.3.0
http://www.oscarsmeulders.com/clients/SOS/versie_01/test_new.html

1.3.1
http://www.oscarsmeulders.com/clients/SOS/versie_02/test_new.html

i used the same code, only a different version of masonry, But with version there are gaps.
or am i doing something wrong?
thanks