salvattore
salvattore copied to clipboard
rnmp
"Balanced columns" algorithm
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 
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).
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.
Also would like to see a live example + any additional instructions to put it on the website. This is gonna be great!
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.
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.
@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).
Would just like to drop in and say I'd love this to be merged with master! :smile: On Tumblr/WordPress/etc. themes with posts that can vary wildly in height, this would improve how Salvattore presents posts dramatically. So, yeah, +1.
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 ?
@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.
:thumbsup: 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.
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.
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.
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.
@MoOx @rnmp what's the status on this. Would love to see this merged in...
I'm tired of rebasing all the time, so @rnmp should just tell me when he is open to use a "less bad" algorithm...
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.
I would be more inclined to use / expose the init event. Pair that with the imagesLoaded callback to init the plugin.
Appreciate all the efforts! :+1:
@mikedidthis I thought about that but then I would end up with a long column of images which then flickers after all images are loaded :(
I figured knowing the height I could work out up front the column images go into.
Yeah, I see the issue. From a selfish point of view, I don't think salvattore should worry about images, embeds etc.
I believe this is a decision for @rnmp
For what it's worth I added a temp solution:
<script>
(function() {
var imgs = document.querySelectorAll('#gallery a>img'),
i;
for (i = 0 ; i < imgs.length ; i++) {
imgs[i].addEventListener('load', function () {
salvattore.resort();
}, true);
}
}(salvattore));
</script>
return {
append_elements: self.append_elements,
prepend_elements: self.prepend_elements,
register_grid: self.register_grid,
resort: function() {
Array.prototype.forEach.call(grids, self.recreate_columns);
}
};
Working fine :) On 100 images it works great.
What's the status here? Or, why is this not merged? To be honest, without balanced columns this plugin covers not very much use cases.
