Calculate column widths on resize.

[metafizzy]

Calculate column widths on resize.

[desandro]

The Fluid method explained in the Masonry Wiki should allow you to use Isotope in fluid layouts: https://github.com/desandro/masonry/wiki/faq

Also take a look at Chris Armstrong's implementation in his Zootool Inspiration gallery app: http://chris-armstrong.com/inspiration/

[shanna]

I can see Chris's example works but it's extremely hard to read. Chris hands over options is subsequent calls to isotope that don't match the options documentation? http://isotope.metafizzy.co/docs/options.html e.g:

isotope({columnWidth: ...})

I'm guessing this option might be getting ignored and the reason he gets away with this is the default outerWidth(true) on the first brick happens to be the same width as all his other bricks?

In my case this isn't true (the first brick spans 2 - 3 columns) so I tried to alter the original columnWidth using the documented format but it silently does nothing. So far the only way I've been able to get it to kinda work is to destroy isotope and fire the constructor again.

$(window).smartresize(function() {
    $container.isotope('destroy').isotope({masonry: {columnWidth: new_width}});
});

[desandro]

Looks like this is buggier than I expected. See:

http://jsfiddle.net/desandro/N3PJT/1/

[shanna]

Yeah sorry. I didn't know if I was attempting something unsupported, I'd failed to understand the documentation or it was a bug.

I did take a quick peak at the source but it's been a long time since I've written any Javascript and it was obvious I was out of my depth. I figured the columnWidth is being cached somewhere or the options from subsequent isotope() calls aren't being merged in but I got lost trying to follow the widget bridge option stuff.

[desandro]

Lemme follow up properly:

Fluid Masonry layout + Isotope can work, but I'm finding a couple bugs:

• Using items with multiple widths doesn't quite work because jQuery calculates widths with fractions that can throw off the layout algorithm. Try uncommenting .item.w2 { width: 36%; } in the jsFiddle demo to see what I mean.
• You need to call Isotope twice before it lays out properly. This is a bug, and I'm not sure where its coming from considering it doesn't happen with Masonry.

Hi,

if by Smart Columns you mean something like this - http://www.webappers.com/2009/06/10/autoresizing-smart-columns-with-jquery/ , then I have just come up with a solution for my Isotope project. (code borrowed from the concept of SmartColumns).

$container = $('.isotope');

$container.children().width(Math.floor($container.width() / Math.floor($container.width() / 200)) - parseFloat($container.children().css("margin-right"))+"px")

// the 200px is what I would like my column width to be based upon, expanding and shrinking smartly

$container.imagesLoaded( function(){
$container.isotope({
itemSelector : 'li',
layoutMode : 'masonry',
masonry: {
columnWidth: Math.floor($container.width() / Math.floor($container.width() / 200))
},
resizable : false
});

And put the same code in $(window).smartresize and works like a charm!

[desandro]

The Fluid / responsive demo shows the proper technique for this.

Thanks for the answer, but it has 2 issues:

• it doesn't take "smart" columns into account, it doesn't calculate the number of columns that could fit into the layout and resize the appropriately; it just resizes the columns based on your set number for each container width (making them unreasonably small or large in either case).
• I had to open Chrome to see what it was actually supposed to look like. Please see my Firefox screenshot for reference: http://imageshack.us/photo/my-images/705/imageshackra.png/