"Float" images upwards with CSS
css, html, image, pinterest
Solution
http://masonry.desandro.com/
Masonry is a good grid arranging JQuery plugin. Probably one the best out there.
I personally have not used it however friends of mine have with good results saying that:
- It is customisable
- It is quite lightweight for what it does
- It is fast
Unfortunately it is not exactly the fastest thing in the known universe since it uses JQuery (which is already a relatively slow Library, or framework as its starting to get) and puts a CPU intensive calculation on top. As such it is not as fast as a CSS hack but whether Masonry is the best choice or not depends on exactly what you need it for which has been left out in this question.
If you are building a simple portfolio type thing then a CSS hack is the best method but if your building something further then this might be the one your looking for.
Unfortunately due to patchy standards across browsers like IE you will find producing this layout without considerable resources placed client side (such as image resizing for very large images that could have been cropped server side) difficult.
o.v. and ThinkingStiff do have answers and if you were to standard resize every image that comes into your site to a particular size and use caching method available for the layout you could easily get away with a CSS hack for something simple like a photo page or a portfolio.
Problem
I'm trying to make a Pinterest-like gallery for my portfolio. Nothing too fancy, just displaying images that are found in a folder by some simple PHP. I will attach a lightbox (or something like it) later. For now, I have trouble with letting the images "float" upwards against the other pictures. In some magical way, the two images in the top right do it, but the other ones do not. You can see it live here. Here is a JSFiddle, but it doesn't show the images. Is there some easy way to do it? Or do I really need to start using some kind of jQuery-plugin for this? Thanks!