search

metafizzy / isotope

:revolving_hearts: Filter & sort magical layouts
https://isotope.metafizzy.co
11.05k stars 1.41k forks source link

Calculate column widths on resize. #28

Closed shanna closed 13 years ago

shanna commented 13 years ago

I'd love to be able to pass or recalculate column widths when a resize is triggered specifically with the masonry layout. It would be handy for doing smart columns that shink/grow a little to fill the container on resize.

desandro commented 13 years ago

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 commented 13 years ago

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 commented 13 years ago

Looks like this is buggier than I expected. See:

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

shanna commented 13 years ago

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 commented 13 years ago

Lemme follow up properly:

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

veli-ee commented 12 years ago

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 commented 12 years ago

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

veli-ee commented 12 years ago

Thanks for the answer, but it has 2 issues: