search

zonear / isotope-perfectmasonry

PerfectMasonry extension for Isotope
138 stars 49 forks source link

perfectMasonryHorizontal #9

Open romanenko opened 11 years ago

romanenko commented 11 years ago

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

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

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

It works. Thanks a lot!

mikkotikkanen commented 11 years ago

Good! :)

romanenko commented 11 years ago

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: screenshot

mikkotikkanen commented 11 years ago

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

romanenko commented 11 years ago

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

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

romanenko commented 11 years ago

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.