Hmm. crashed my browser when i pack 9,999,999 boxes. Piece of shit plugin.
Happy hump day DN!
Following up on the release of my portfolio last week, I'm trying to keep the ball rolling by releasing some of the open source stuff I've been cooking up.
So here's Bricks. Masonry layout made ridiculously fast, regardless of how many items you put in it. Give it a shot on the project page (the post link), designed by the legend Chris Allen himself.
The code is on GitHub here: https://github.com/callmecavs/bricks.js
You're on a roll. First a complete rewrite of Layzr.js and now this! I'll probably have a use for this in my portfolio update. Thanks for sharing.
Cool man! Thanks for sharing, I will try it with my future portfolio ;)
Guy i work with built MacyJS for easy responsive masonry http://macyjs.com/
I needed a similar script a few months ago and I did some research on available pinterest-like layouts. As you, I found most too bloated so ended up writing my own. I also noticed that a lot scripts read-size/write-css alternately, instead of calculating all at once and then applying all at once. Your looks the closest to the perfect one.
But I see some flaws in statements that you mention on the plugin homepage:
Are built on dependencies, like jQuery
That's not true. Even official masonry script by David Desandro has vanilla js version. Also there are https://github.com/henriquea/minigrid and https://github.com/attila/savvior and someone already mentioned Salvatore. And even Woomark has version without dependencies https://github.com/germanysbestkeptsecret/Wookmark-jQuery
Mandate HTML markup, or require a CSS stylesheet
That's also not true, most allow to use any markup.
Position elements with transforms, making animation difficult
It's actually the opposite. It's much cheaper for browsers to animate elements that are positioned with transforms.
I appreciate you saying mine looks the closest to perfect ;)
In regards to your first 2 points - I get it, there are other exceptions to these "rules." I don't think what I said is a blatant lie though. There are plenty of solutions out there that are bloated, and don't perform particularly well, and depend on jQuery or mandatory HTML/CSS.
In regards to your third point, what I meant is the following. If the masonry layout uses transforms to position the elements, it then becomes more difficult for the end user to animate the grid elements. Why? Because there's an inline "transform" property that they need to compete with, and that needs to be maintained for the element to continue to appear in the proper position. Believe me, I know that transforms and opacity are the cheapest properties for browser's to animate, because they effect only the composite layers, rather than layout, recalculating style, etc. If the library uses a transform to position a masonry element, then the end user is forced to animate a less-than-desirable property to "reveal" items.
Random question: why is your logo a blurry-due-to-hardware-acceleration SVG instead of, y'know, text?
Cool. Have you guys tried Salvattore too?
I'd actually never heard of it, thanks for bringing it to my attention.
I will say I do really like the CSS style syntax of it, and that's something totally original I've never seen with masonry implementations, but I always avoid using jQuery, so it's a bit outside of my use case.
It doesn't use jQuery. ;)
Might I recommend changing the tagline? "A jQuery masonry alternative" made me think it was for sure a jQuery plugin - upon further research though I see that jQuery Masonry is a plugin, and your library is an alternative to it. My apologies.