jquery-masonry

How can I fix the gap caused by the element sliding to the next row like in the image below? I'm using Isotope with the masonry layout mode. Thank you. I have a similar problem and I'm going to "fix" that by precalculating the order of the elements that way, that there will be no spaces and the boxes will always fit in the grid layout. AFAIK there is no solution by this isotope jQuery plugin for that. At a guess I'd say - Because the next item in the order is that big block underneath. Or the following item is the other smaller block bottom left. Even if that was moved up to occupy the white

I have a dropdown (ul.sub-menu) with items inside (ul.sub-menu > li) that I'd like to apply jQuery Masonry to, but my dropdown is absolutely positioned. Is there a way to do this and keep my absolute positioning on the parent element? Javascript jQuery("ul > li > ul.sub-menu").masonry({ itemSelector: '.brick', columnWidth: 300 }); HTML <ul> <li id="menu-item-9451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9451"><a href="/solutions/" >Solutions</a> <ul class="sub-menu"> <li id="menu-item-9458" class="brick"><a href="/solutions/internal-social-software/" >Internal

I'm getting a strange bug in the browsers in iOS7 where black lines are appearing around div elements. But when you zoom in to an element, these lines are disappearing. Does anyone have an idea what causes this strange bug? In iOS6 there weren't any lines appearing. It's happening on this url: http://www.tristanfrencken.com/ Hopefully someone could help me with this! Bizarrely, this seems to be triggered when an element is fixed AND has a background color, but only in IOS7 and not if it has a background image. I'd chalk it up as a bug in the browser, but as a workaround for now you could use a

Does anyone know how to make jQuery masonry stack from the bottom up? I wrote some rudimentary JS to stack things from bottom up but it couldn't do masonryish stuff like stacking the next brick on the shortest column and bricks that span multiple columns. Since I'm not good with Math, looking at the source code just makes me dizzy. Anyone want to try? You're going to laugh at how easy this is to do, but you will need to modify the plugin ( demo ). Basically, I changed line 82 - 85 from this (all that needed changing was top to bottom but I added both so you can switch back and forth): var

I'm looking to create a seamless (no gutters) fullscreen image grid using jquery masonry, where the images are fully responsive and are of varying widths. I've found a couple other starting points out there, but it's proving to be quite difficult for my amount of jquery knowledge. This is what I'm going for: http://future.thefutureforward.com/~cycles/assets/images/HUB0002_dAutremont_4WEB.jpg And this is what I have so far: http://future.thefutureforward.com/~cycles/archive-test-fluid.html HTML (just a portion): <div id="masonry-container"> <div class="box nav-container"> <div id="bumble-bee

I've been trying Masonry but can't get it to work exactly as I wanted. The elements I use vary in width and height, but all fit in a grid (4 different sizes, all multiple of smallest+margins). I've also calculated a distribution of elements (7 of the smallest, 4 of all the others) that can fit precisely. However it's rare that masonry manages to fit them neatly, sometimes there's one lurking at the bottom, sometimes several are misplaced. It's always so that in one view I can see what items need to be moved for it to fit. Is there a way to make masonry more aggressive in moving elements? Or

I am working on a masonry layout for an image gallery. But masonry most of the time displays images overlapped on one another. Rest of the time its ok and sometimes some image divs overflow onto the div below their enclosing div. How to contain these images in and not prevent overlap. imagesLoaded method has been deprecated I think. ok here is my code: Example of the image in the partial. There will be many <div class="container span3" > <div class="image"> <div class="content"> <a href="/issues/<%= image.id %>"></a> <%= image_tag(image.photo.url(:medium)) %> </div> </div> <div class="title">

I am trying to use some ajax and the jQuery Masonry plugin to add some items - but for some reason the new items aren't getting the masonry applied ? I'm using jQuery.ajax({ type: "POST", url: ajax_url, data: ajax_data, cache: false, success: function (html) { if (html.length > 0) { jQuery("#content").append(html).masonry( 'appended', html, true ); } }); }); However the items that are appended subsequently don't have the class="masonry-brick" applied which means that they stuff up completely the positioning ? frankp Had a similar problem and instead used the following line (converted for your

I recently discovered the Masonry and Isotope JQuery plugins. They seem to be functionally almost identical and both appear to have the same author. The only obvious difference I can see is the license. What are the main differences between these two in terms of functionality? Why would you use one over the other? An excerpt from the interview with the author: To some people Isotope would look very similar to the work you had previously done with Masonry; can you explain the main differences between the two? Isotope has several features that Masonry lacks. Masonry essentially does one thing,

the title pretty much says everything, I did look into the images plugin from masonry yet I had no luck, I wonder if anyone could help? The script does many things, it has the filter bit, the animation, show/hide, ajax to get the content etc etc. I'd be happy if anyone could investigate into why it is overlapping and how i could solve it based on the code below: jQuery(function(){ jQuery('#container').masonry({ itemSelector: '.box', animate: true }); }); (function ($) { // Get all menu items with IDs starting with "filter-" and loop over them $(".menu li[id|=filter]").each(function () { // Get