I'm working on a full page, flexible width image gallery.
https://weknowtoomuch.com/projects/nga/projects-grid
Now, you probably start to get an idea of what I'm trying to do. The page in it's current state is rather good, but the spaces between the images (blank spaces around the center of rows) are a bit too big.
The way I have implemented that is very simple, just distribute images by alternating their float property between left and right.
The effect that I'm trying to achieve, ideally, would be something closer to this:
http://images.search.yahoo.com/search/images;_ylt=AwrB8p4dRulSGDgAuCeZDWNH;_ylu=X3oDMTBwazJlZjZ1BHNlYwNzdHJtBHNsawN0aXRsZQRjcG9zAzA-?p=2014+Super+Bowl+pictures&aq=Trending&sid=743e5f15-0b3b-3483-ada1-c617f8754761&spos=0&norw=1&
I tried some research, but the solutions that I found involve fitting all images by changing row height, which I'm trying to avoid. Some tall images might also have to occupy two rows, which would also probably not work well with the changing row height technique.
What I'm hoping for, maybe, is an algorithm that would let me distribute images in a way that white spaces are minimized, and also randomize the location of white space blocks.
I am not using jQuery in this project, but I could do an exception if there is no other reasonable way!
A complete solution that fulfills all the above criteria would also be a good alternative to implementing an algorithm myself, in case you have a tip in that direction...
A final note: some minimal horizontal cropping of images is also acceptable.
Hoping to get some tips, leads, and other useful feedback, and that this would help someone else sometime.
Strangely, a similar question was asked yesterday. In my answer I have presented a draft for a layout engine that adjusts the height of each column to achieve a tile effect.
You don't want to adjust the heights, but the mechanism could perhaps be altered to fit your needs. If you don't update the heights, you can achieve justification by distributing the remaining space among the gaps between the photos. That can create very large gaps which don't look nice. Alternatively, you can achieve a more compact look by centering the rows at the cost of having ragged margins. Still, this looks better in my opinion.
I've created a scrappy prototype (that does not work in IE and has other issues). It centers the images, but you can download it and alter the gap and center parameters.
I know that this is not an answer to your question, more like a suggestion. There are bin-packing algorithms for evenly distributing the images over the rows. Also, the issue of the double-row images is not solved.
Are your photos of arbitrary size or do you use, say, three or four standard sizes? If so, possible layouts could be precalculated and then applied on the fly.
Related
So I have some elements I'd like to display in a project I'm working on. Each of them is supposed to look like a pixelated banner, sort of. Here's an example:
The straight lines on the left and right are easy. Those are just simple borders. The bottom of the banner is the difficult part. I would like for this to be able to adjust kind of like a flex object would. This requirement is making it very difficult to find a solution. The pixels need to remain the same size and so it seems like an svg wouldn't work.
I spent a decent amount of time googling last night and I found some solutions, but none seemed to be adjustable. They were static sizes with pixel manipulations to get the effect.
Can anyone think of how to achieve this effect? Just being pointed in the right direction would be wonderful as well.
I think the border-image property might help you. You'll need a static image with of your pixel border to be sliced at the appropriate places.
You could also try border-radius for curving the border, if the solution you're using now would work with that.
I've gone through lots of masonry libraries before posting this question, but I could not find anything similar. So, I would greatly appreciate your advice.
What I'm trying to achieve is a perfect square masonry with just several (1-5) images - similar to Facebook images layout. E.g:
Also, I've been trying to build it myself from scratch, but there are some difficulties: As I understand, one can never know image height and width before it is partly or fully loaded. Even though, at first I need dimensions of only the first image to decide on a grid style, this waiting does not seem a good solution. On fb, the grid seems(?) to be determined from the beginning.
I have doubts that in case of FB the positions and sizes of these images are calculated in back-end and css is used only for masking, because server returns already resized images and maybe it even stores these alignment data to avoid repeated calculations.
Could you share your experience on this or redirect me to some library that solves this task? Actually, this algorithm should be easier than perfect masonry algorithms with many images, because only 1-5 images needs be shown here and all cases are determined based on whether first image is a portrait, landscape or square and whether it fills container width.
Thanks!
Can anyone suggest similar to https://github.com/shawnbot/masonic solution, but for canvas?
I need masonry-like layout where image tiles with different sizes will be positioned properly without lots of whitespace.
P.S. Canvas chosen beacause of large data and better performance.
If by "properly" you mean with minimal white-space and disregarding any rectangle's order, then you are looking for a `bin packing algorithm'.
Here's one example (of the many available with a Google search):
https://github.com/jakesgordon/bin-packing
Hi I am trying to make a bunch of divs of various heights float into the optimum position to take up as little space as possible collectively. I have tried using inline blocks with the vertical-align set to top as well as floating everything to the left. The divs are nestling(sort of) but leaving large gaps from time to time. Is there a way with css (or javascript if necessary) to organize these divs together like tiles without gaps? (or the smallest gaps possible)
thanks
Or take a shine to Masonry's bigger sister Isotope. On top of Masonry, she's got many other tricks up her sleeve, such as sorting and filtering items and much more.
Like the images on http://iam.beyonce.com/?
If yes, check out the demos on jQuery Masonry and learn how to fix it up.
I've got a bit of a tricky question I couldn't find the answer to. Basically, This is what I have:
In the center is a search box (fixed to the center of the page), and around it are dynamically loaded search results of differing sizes (although, if need be these can be restricted). Thing is, they need to "wrap" around the search box after the results have been loaded. My normal go-to is floating, but this isn't really going to work, as the box isn't aligned to a particular direction.
I've looked at jQuery Masonry for a solution, but it isn't going to work for me (doesn't detect fixed elements, doesn't work from a point).
Any pointers in terms of solutions or Google-Fu would be much appreciated.
This is similar to packing textures of different sizes on a square. Have a look at this algorithm: http://www.blackpawn.com/texts/lightmaps/default.html
Since you have a central fixed box, maybe you can divide your available space in 4 rectangles and then pack the boxes into them.