"Balanced columns" algorithm

[MoOx]

This commit include a new algorithm that handle elements height during
the repartition of the items.
The previous algorithm was pretty simple (just balance same amount of
items in each columns), and this can create visual issue if lots of
items have different heights.
I currently have an implementation that can use more than 5000 items, &
with this amount the differences are too big. Checkout an ![commented
example](http://cl.ly/image/1c0N2o181932/Screen%20Shot%202014-03-20%20at
%2021.53.23.png)

Here is a new algorithm that include a small process to retrieve
correct height (by appending them in a additional column
showing/retrieving value/removing ). Using a wrapper to append & remove
from the dom make this very fast. I don’t get any lag with lots of
items on my current board.

Should close #4 (& so close #52 )

A 2nd (simple) commit include fix for latest Chrome (Close #69 & close #40 )

It jshint ok (I've used default grunt) & it should be ok with your coding style. I hope so :)

It not really better on your example (in the repo) since the images doesn't have the appropriate height during loading, but in my case it give something really great (fyi I use https://github.com/suitcss/flex-embed/ to prepare my css to avoid issue like that, very nice for rwd).

This algorithm part should be easily skipped if wrapper in a conditional part (that can be enabled with an option).

[MoOx]

FYI, here is a screen with the new algorithm & a lots of results

[MoOx]

To avoid redundancy, here I just change the code to use append_elements method too.

[rnmp]

Thank you @MoOx, this is fantastic. What if we execute the balance algorithm once the window is completely loaded though? That way we don't need to predict the image heights.

[rnmp]

Also would like to see a live example + any additional instructions to put it on the website. This is gonna be great!

[MoOx]

The problem to wait until window load is that can be long. For me you example pages take like 20secondes to load, so initiating or updating salvatorre will be really weird after that delay. I don't think it should be the default option. But you can still make recreate_columns() public to allow people to call it on window load (a snippet in in README should be enough for that).
Like I said, if there is no this new algorithm is the default behavior, so you don't need to change something to make it happen. That being said, you will see here that I only use this new method if we have height data available. If there is no values, we fallback to your original method to found column index for new elements.
So this PR should be safe to merge without adding anything for now.

[michaelnie]

The lack of this feature has kept me from using Salvattore, so this is really interesting. But I can't get it to run smoothly, do you have a live demo? It randomly fails for me in Chrome and Firefox. And it dosen't work at all in Safari.

[MoOx]

@michaelnie Grab the zip of my branch (https://github.com/MoOx/salvattore/archive/master.zip) & just try to open the examples/salvatorre.html. It the default behavior here.
But since images are not really big & slow to dowload, the example is not really relevant.
We should use examples without images to get something very sexy (or images with specified ratio so salvatorre can get relevant values).

[ara303]

Would just like to drop in and say I'd love this to be merged with master! 😄 On Tumblr/WordPress/etc. themes with posts that can vary wildly in height, this would improve how Salvattore presents posts dramatically. So, yeah, +1.

[mikedidthis]

Can we expose the balance algorithm so we can call it at will?

Iirc, window.load isn't going to be helpful is we are appending new content (via ajax) to the page. Ideally we should be adding our own x is loaded, do y ?

[MoOx]

@mikedidthis if you use my branch (bower install git://github.com/MoOx/salvatorre.git) you will bet this algorithm. Also if you use append_elements(), you will the same algorithm used.

[mikedidthis]

👍 Thanks @MoOx

It would still be nice to open up the API to allow us to use init or recalculate the grid when we need it.

Happy to do it if @rnmp likes the idea.

[MoOx]

I totally agree.

[rnmp]

Sorry for the delay! Was on vacation.

I will merge this in the coming days and yes @mikedidthis, that would be very much appreciated! Thank you.

[rnmp]

Sorry to bother @MoOx, but I cannot make this algorithm work locally after downloading the .zip of your repo as instructed (in fact, it wouldn't even load at all in my Safari browser). I need to see a live example working in order to merge, please.

[MoOx]

k I will take a look.

[mikedidthis]

@rnmp Cool. Once the merge is sorted, I will expose the methods.

[MoOx]

@rnmp Just pushed a fix for Safari \o/

[rnmp]

Exciting! Will review soon.

[scarfacedeb]

Is there any news on this PR?

[MoOx]

let me rebase on latest change so @rnmp can merge that.

[MoOx]

Rebase, so this should be ok now.

[ngokevin]

This works well for me. The PR has stalled a bit, and I'd like to use it. So in the meantime, I've added salvattore-moox to the Bower registry as v1.0.8. Would <3 a review and merge though.

[jonagoldman]

Any news on this?

[phillip-haydon]

@MoOx @rnmp what's the status on this. Would love to see this merged in...

[MoOx]

I'm tired of rebasing all the time, so @rnmp should just tell me when he is open to use a "less bad" algorithm...

[phillip-haydon]

Sorry @MoOx :( I do appreciate the effort you put in tho.

I'm using your repo at the moment. It's almost perfect for me. Recreation works great when the images have loaded but on initial load because the images haven't loaded yet it falls back to the old way. Looking at changing up your code a bit to add a data-height to work out the calculation.

[rnmp]

Hey everyone! I'm deeply sorry for the lack of dedication to this project. @benjibee, I really appreciate all the attention and use that Salvattore receives. Even though this is my project, it is @ppold who is in charge of most of the code and he's very busy lately—so am I.

That said, because I believe all what has been said is true, if you guys can find a way of making the automatic pull request work I'm more than willing to approve it. cc @MoOx.

Also, @MoOx @attila @MariusRumpf, since you are the three top contributors to the project, I'm offering making you collaborators on Github so that you can author changes that affect Salvattore directly. Let me know if you're interested!

cc @edadams

[kirkstrobeck]

👍

[MariusRumpf]

Hey @rnmp,

thanks for the offering. I won't find the time to implement new features for this project, but some support should be no problem (for pull requests, questions, issues).

[attila]

Thanks for this @rnmp it's greatly appreciated. I can only second @MariusRumpf here, I am happy to help out with support whenever I can.

[rnmp]

Thanks guys, just added you as collaborators. Waiting to hear from @MoOx.

[MoOx]

Not interested sorry, I am already busy with a lot of other project like cssnext or stylelint.

[MoOx]

Feel free to use this PR in any way (PR on this PR, or manually rebase on master...)

[rnmp]

Understood @MoOx, thanks so much for contributing to the project and I'm deeply sorry again for lack of maintenance. Hopefully with the help of @MariusRumpf (who’s been doing a great job this weekend) and @attila will get up to speed.

You guys are great.

[witrin]

To anybody who is able to merge this: The HEAD of https://github.com/witrin/salvattore allows an auto merge. The reason why merging here is pain in the ass is because of the minified version salvattore.min.js which is part of this repository. Separate such stuff in a bower repo and contribution will be easier.

[benjibee]

@rnmp thanks for the info, and I think we all understand being busy ;)

You've got a great idea here, I'm glad you chose to let the community help with this 👍

[MariusRumpf]

I think balanced columns should not overwrite the existing algorithm, which should still be default. We might add these setting in CSS:

#grid[data-columns]::before {
    content: '3 .column.size-1of3 balanced';
}

We might use the ordered option (actual algorithm) by default if not provided then. This would fit our user group which might not be trained in javascript. Problem is that we cannot add endless settings here, since this will then get complex to check and to set the plugin up.

Or we put it in JS:

<script>
    salvattore.init({
        algorithm: 'balanced'
    });
</script>

This would mean we no longer init when the plugin is bound in and one has to call the init function to use it. This would break existing implementations, but would be easy to fix. It makes makes the basic integration a little harder and we drift a little more to the direction of the existing masonry plugin then.

My vote would be for the css option. What do you think? @rnmp @attila @ppold

[attila]

It definitely should not be the default option. My biggest concern is that block heights are measurable only after load which limits use.

Keep the config in CSS, let's not decide on the autoloading behaviour within this PR. Autoloading has been an outstanding issue for a while but I believe it should be worked out elsewhere.

[rnmp]

@MariusRumpf @attila I agree that it should not be the default and CSS option sounds great. Thanks so much for taking care of this.

[MariusRumpf]

I integrated a basic version based on this pull request in the balanced-columns branch. This still has some issues when resizing but is working okay so far.

[rnmp]

Thanks @MariusRumpf!

/cc @MoOx

[josephbergdoll]

@MoOx @rnmp @MariusRumpf is there a way to disable height balancing of any sort and only show columns with the contents in the order of original appearance? (like chronological order)

[MariusRumpf]

@josephbergdoll the version from the new branch and the current released branch do not change the order, they keep it and do not balance when using existing settings.

#grid[data-columns]::before {
    content: '3 .column.size-1of3';
}

To enable this feature in the branch that is not yet release you have to provide the balance keyword like so:

#grid[data-columns]::before {
    content: '3 .column.size-1of3 balanced';
}

[pontusnilsson]

👍 just what I was looking for.

[sqndr]

Any progress on this? 😉 I was looking for this as well!

[MariusRumpf]

Won't find the time to work on this in the near future. Feel free to give it a try, seems to work except when changing breakpoints on resize, the box order is different then.

[Rudi-Batubara]

the layout isn't neat . how do I tidy it up ?

HTML :

[stramel]

I have updated my fork with some tweaks on this PR. It is working much better than any other plugin.

Let me know if you see any issues with it.

[TomasPilar]

Hi, this feature looks cool! Any progress?

[benjibee]

If only my skills were up to par… I'd do this myself… 😭

[uncenteredDiv]

@stramel
Tried your Branch and found out that i've lost the IE10 compatibility.
All elements are in the first (of three) columns and don't get distributed.
Any idea where is comes from? Can't see any unsupported functions or so.

[Aeon-Avinash]

@MariusRumpf
Thanks a ton. Honestly, Salvattore looks downright bizarre without balanced columns. Although this Salvattore fix breaks down at media break points, but for standalone loading at any specific media width it operates feasibly. Your fix makes it almost palatable for now. Hope someone provides the true balanced columns solution for Salvattore.