Fluid & masonry layout breaking into 2 columns

[baoagency]

I don' think something is working correctly but I can't pinpoint what exactly.

Basically my layout had successfully been outputting 4 boxes per row (at 25% width) without a problem but over the last month or so (new jQuery version is out/browsers have been updated (i think)) it seems something has changed to produce the error where by the 4 column is now turning into a two column on browser resize and sometimes even on page load. See my video here: http://cl.ly/0s172D303X1M3H1v161z (click View in browser link). The jsFiddle is here: http://jsfiddle.net/TVXve/

I find the problem is inconsistent across browsers, it works in some browsers but not others.

[desandro]

Thanks for submitting this issue :)

Yes, this is a legitimate bug. It occurs when Masonry is measuring the width of items. Browsers do not return the width of items in decimal pixel values. So if container.width() === 401```, columnWidth is 100.25, but the width of the items, withwidth: 25%` will be 101.

Unfortunately, I don't have a good solution. The best I can offer is try out CSS width: 24.5% and then deal with the gaps.

See also http://chris-armstrong.com/inspiration/

[nickff]

Thanks for this tip, @desandro. Hugely helpful here - http://future.thefutureforward.com/~cycles/archive-test-isotope-fluid.html. If you have any additional thoughts on how to deal with the gaps that occur with the .5% width decrease - especially with boxes of varying widths - that would be epic.

[desandro]

See http://jsfiddle.net/desandro/TVXve/2/

The issue we need to solve is to set the container width to a proper multiple of the columnWidth. This is backwards in how Isotope and Masonry layouts typically work -- as they measure the container to calculate columnWidth. The code would look something like this:

var $container = $('#container');
// get the first item to use for measuring columnWidth
var $item = $container.find('.item').eq(0);

$(window).smartresize( function() {
  var itemWidth = $item.outerWidth(true);
  $container.css({
    // other options...
    // disable automatic resizing when window is resized
    resizable: false,
    // container is 4 columns wide
    width: itemWidth * 4
    // trigger isotope reLayout
  }).isotope('reLayout');
  // trigger smartresize for first time
}).smartresize();

It's a hack. Please follow up and let me know if this resolves it for you.

[nickff]

@desandro,

I tried setting the widths of my isotope elements via css as 20%, 40%, and 60% respectively, then implementing what you have in the jsfiddle, but it's doing some fairly weird things for me:

http://cyclesdautremont.com/archives/

(my js is here - http://cyclesdautremont.com/assets/js/jquery.isotope.call_no_gutters.js)

Perhaps I'm missing something though. Let me know if you see anything out of whack.

[desandro]

Okay, wow. My comment above is why you should always show your answer with a reduced test case.

Here's a working version:

http://jsfiddle.net/desandro/DQydj/5/

I'm doing some hacks. I add a proxy container to get the width of the container. But then use that calculation to set the width of the actual container. This example has 20% and 40% width items.

[nickff]

@desandro,

Thanks for this example and explanation. It's working brilliantly here - http://cyclesdautremont.com/archives/

I've removed the $item line, as that variable is no longer being used.

My only remaining issue is when resizing my browser window. Spacing between columns gets weird. I'm wondering if it has something to do with the fact that my example is using images. Do you think I need to use the imagesLoaded function?

I know resizing the browser window is an edge case, so I'm not overly concerned, just wondering if you have any thoughts as to why it's acting strange.

Thanks again.

[desandro]

Whoops, I forgot to mention you have to disable the width transition on .isotope.

.isotope {
  -webkit-transition-property: height;
     -moz-transition-property: height;
      -ms-transition-property: height;
       -o-transition-property: height;
          transition-property: height;
}

[nickff]

Done and done.

http://cyclesdautremont.com/journal/

Thanks so much, bro.

[desandro]

Here's a much better solution http://metafizzy.co/blog/beyonce-seamless-fluid-image-masonry/

[baoagency]

This Beyonce site poses a great solution. Thanks.

[Pixelous]

Hi, David! Could you say please how to use this http://metafizzy.co/blog/beyonce-seamless-fluid-image-masonry/ with different column widths like here https://github.com/desandro/isotope/issues/271#issuecomment-9463968 ?

[juliankrispel]

@desandro what if there there was a masonry option that allowed the user to define a tolerance value, I'm implementing something like this for myself at the moment, would you take a pull request for something like that?

[desandro]

@juliankrispel This will be fixed in v2, as it will use getSize which returns measurements with decimal values.

[lozandier]

@desandro Is v2 referring to a new version of Isotope, Masonry, or both (I've assumed even with the commercial license of Isotope that it's not necessarily guaranteed Isotope will adopt the latest iteration of Masonry features) ?

[desandro]

@lozandier By v2, I mean Isotope v2.

[lozandier]

@desandro Understood, awesome; look forward to Isotope v2.

[ingeniumdesign]

i need a resizer for isotope v3

[ingeniumdesign]

here is a perfect isotope v2 resize: http://demo.undsgn.com/themeselector/?theme=studiofolio but how can i use that ? :/ Thanks for help!