perfectMasonryHorizontal

[romanenko]

Hello. Thanks for a great extension for regular masonry layout. What I'm trying to do is to make a horizontal version of this extension.

Can someone point me some ideas what is the best way to modify original horizontal layout methods to make it perfect?

[mikkotikkanen]

I'm actually working on a update that includes horizontal layout but unfortunately due my busy schedule I can't give any date on that just yet. :/ Other than that I can't really help you at this point. :/

[mikkotikkanen]

Just committed the horizontal layout feature, among with other goodies. \o/

You can set the extension to horizontal by providing layout option, like so:

perfectMasonry: {
    layout: "horizontal"
}

Does this work for you?

[romanenko]

It works. Thanks a lot!

[mikkotikkanen]

Good! :)

[romanenko]

After testing isotope-perfectmasonry horizontal mode I noticed that when width of element exceeds columnWidth value, it places element as it should, but width of container sets to columnWidth*numberOfColumns. It wasn't so when I used SergeyKishenin's code

Here, for example, size of the wide element with green Crocs is 300x150, but the width of container is set to 150:

[mikkotikkanen]

Hi. Are you also using the liquid layout option? Is the website accessible anywhere?

[romanenko]

I initialize isotope with this code:

$('.flow').isotope
    layoutMode: "perfectMasonry"
    perfectMasonry: 
      layout: "horizontal"
      rowHeight: 150
      columnWidth: 150

Website is currently deployed here. Size of thumbnails are randomly set, so to reproduce the bug try refreshing the page.

[mikkotikkanen]

Just to be clear, what exactly should happen in this case? Width of the container should be 2 columns?

[romanenko]

I don't know how would behave original isotope with masonry layout, but, if happened that there is an element, wider than a column width it shouldn't crop it. Maybe, the width of the isotope container should be not equal to columnWidth*numberOfColumns, but maxWidth*numberOfColumns, where maxWidth equals to maximum width of the elements in the column.

Maybe, this is already out of scope of isotope? I just don't really know how original isotope would behave.